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Highlight 



OT Roviohada 
pretty good idea of 
the content they 
wanted to show; 
everything else 
was up to us s $ 

White Sheep Isobar on creating 
the web presence to fit the 
latest outing for biggest app of 
the last decade. Angry B*ds. 


A vintage time for web typography 


ince the web type revolution in 
2009, the discipline has endured a 
relatively painful few years of 
maturation, In a sign of iis corning of 
age in 2012 though, we're starting to 
witness some truly fantastic uses of 
web typography using typefaces 
either optimised or designed 
specifically for our screens, As typography evangelist 
and Fontdeck co-founder. Richard Rutter, points out in 
his excellent feature starting on page 36, there seems to 
be a palpable confidence growing among web 
designers, and we are seeing web fonts used in new 
and increasingly bold ways. 


There clearly hasn't been a better time to brush up 
on the discipline, so join us as we Investigate the latest 
tools and methods of ensuring our use of web fonts 
and typography is as cutting edge in its technique as it 
is in its creativity. 

There's almost too much else happening this issue to 
mention, but we're particularly chuffed to have gone 
behind the scenes with White Sheep Isobar to see how 
they crafted the web presence for one of the biggest 
digital success stories of the last decade - Angry Birds, 
Learn how spate, angry birds com came to being in our 
feature starting on page 26. If you enjoy the story even 
half as much as the game, we're laughing. 

Russell Barnes 


11 Web fonts are 
being used in new 
and increasingly 
bold ways ii 


Follow us on Twitter for all the news & conversation $ @WebDesignerMag 
Visit our blog for opinion, freebies & more® www.webdesignermag.co.uk 
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Excitographic 

Plotting the features that got us 
in a frenzy over the month.., 

A Steve Jenkins. Features Editor 
A Russell Barnes, Editor 
A Steven Mumby, Designer 
A Ben Martin. Sub Editor 


Turn over to the contents to 
discover whal's going to get you 
excited this issue... 
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Welcome to that 


bitofthemag 
where we learn 
moreaboutthe 
featured writers 
and contributors... 


The latest 
typography 
techniques 
and fonts 
of 2012 


Richard Rutter is a typography evangelist, co-founder of the web font 
service Fontdeck ( fontdeck.com ) and co-founder and production director 
at UX consultants Clearleft ( clearleft com) In this month’s cover feature he 
looks at the latest typography techniques and fonts of 2017. Fage 3B 
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Matt Gifford 
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m ColdFusion. Flash md AiR 
development. This Issue he 
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boogie Maps API. He 
reveals how to customise 
and personalise maps to 
match your brand. Page 80 
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A keen supporter of web 
standards. Sam loves 
getting the most out of 
HTML and CSS. This issue 
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of rKrt only creating 
attractive forms., but aso 
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Simon Bisson 
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The right response 
for images 


Responsive images are a crucial element of 
responsive design, but there is no set standard for 
designers and developers to work to 


R esponsive design has become 
the lynehpin for current web 
design techniques. The simple 
premise of being able to view a single 
site across multiple devices is hard to 
ignore. However, on its path to the 
number one spot, responsive design has 
taken a few twists and turns, and still has 
a way to go before it fully matures, 
Different designers have different 
opinions on what constitutes the best 
method for achieving a responsive 
design, Liquid layouts and media 
queries are obvious solutions and ones 
that helped shape a standard, While text 
and layouts are enjoying a new flexible 
future, the issue of responsive images is 
struggling to keep up. An all-defining 
solution has yet to be found. The simple 
solution is to make the width of an 
image 100% and watch it rescale 
accordingly. But. this solution is basic to 
say the least and a whole host of issues 
immediately spring to the fore. File sizes, 
load times and image quality are just a 
few of the more obvious issues. 

An alternative solution has been 
implemented by the Web Hypertext 
Application Technology Working Group. 
The src set attribute has been added to 
the WHATWG's HTML spec by Ian 
Hickson, Put met with a lot of opposition 


from developers. Hickson, an HTML and 
web standards expert took the time to 
write a very long email explaining his 
decisions. To get an insight to the 
solution and the issues involved you can 
read the full email at bJl.ly/IVtGCd. 

Tq give the story some background, 
the Responsive Images community 
grouo 

respimq) has been trying to come up 
with a solution and proposed a refined 
<picture> tag as one possible outcome. 


A solution to what is currently an 
impossible question has been 
suggested by many. Speaker, designer 
and author Elliott Jay Stocks has written 
a great post (hiUy/AtEELw) on the 
issue with background images in 
responsive design, He highlights the 
problems and points out the 
shortcomings of current solutions 
before going on to offer an answer. 

David Clements has been working 
on a responsive implementation 


While text and layouts are 
enjoying a new future, images 
are struggling to keep up 


The new version would apparently work 
much like the HTML5 <vldeo> tag. The 
WH.ATWG, unaware, added the src set 
attribute to its HTML specification. Not a 
big deal, you might think. But. 
introducing a solution that only goes 
half way to solving an issue without 
looking at other solutions, is not the way 
to get anything done. The simple fact 
that the solution does not resolve the 
issue, makes it an almost pointless 
exercise in adding the src set application 
to the spec in the first place. 


framework (alpha), known as Responds 
which Implements picture and src set. 

He states that: 'One of the main features 
of this framework is that it defers the 
loading of assets (eg src's etc) until it's 
finished processing (this includes script 
tags in the body). It achieves this using 
the noscript technique (discovered by 
filament group ('?)) - except instead of 
wrapping img's individually we wrap the 
whole body and then use a cheeky hack 
(dynamically wrap it in a style tag) to pull 
the noscript contents out (for browsers 


uouiriES 


Making awesome stuff 
on a regular basis, oh 
yeah. 


A bold theme for creative foil 





* 




Faalurod Clients. 


Oudfaeked WHS 


J 


that wipe noscript contents on render): 
The framework can be found on GitHud 
( bit.lv/KGIQTi) and more discussion can 
be found via the Responsive Images 
community group. 

This goes to show that there are 
plenty of options for responsive images, 
but none offer a complete solution: the 
current choices are simply workarounds. 
The simple fact is. there is no definitive 
answer at the moment. Designers and 
developers will have to take a solution of 
choice and wait for a standard to evolve. 
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How do j Query plug-ins 
help responsive images? 


B ig background images are not easy to 
implement exactly as desired on all 
devices. However, there are a couple of 
iQuery plug-ins that help ease the burden. The 
Supersized plug-ln is a fullscreen background 
slideshow built using the jQuery library. Demos 
and the download can be found at 
bu i Id in ternet.com/p roiect/su persize d. Another 


plug-in that does a similar job is Back stretch - 
sro bbin ,co m/j a uerv-pl ugl ns/bac k stretch/. 

JQuery Picture (I querypicture.com) s a 2KB 
plug-ln that supports figure elements with some 
custom data attributes and the new proposed 
picture format Try out Blueberry (marktyrrell. 
com/labs/blueberryl if looking for a JQuery 
image slider written for responsive web design. 


CSS3 and big backgrounds 


CSSS brings with its one solution, that when fully 
supported should help to overcome some of the 
issues surrounding responsive images. Again, it's 
not the most perfect solution but it does have 
Ptenty of potential, The CSS3 background-size 
property provides a number of solutions. Users 
can specify the size of background images using 
length, percentage, or by using the keywords 
'contain' or 'cover'. 


Setting the background-size to auto sets the 
image to its original size, eg #backgroundimage 
(baotgraund-size: auto}. Specific sizes can be set 
for height and width, but the values Id look out for 
are contain and cover Contain scales an image 
while preserving the image's proportions. Cover 
scales an image, but to the smaller dimension so 
the containing div is always covered', le fullscreen. 
For mane information visit w ww.csB3.info. 



Jason Grigsby 

AAinnnvm Co-founder 

cloucifour.com 


££ rmno t s ure w h at to s ay ato m 
responsive images, it is a difficult 
problem. There Is an inherent conflict 
between the things that make a browser fast 

- in par Ocular the browser's lookahead 

pre-parser - and responsive images whose 

true size can only be determined when the 
page is fully laid out, Were pushing the 
boundaries of what brow se rs can do. 

As for what src set means for designers 

and developers, it means that the people 

who work on standards and build browsers 

have come to understand that the problem 

of images In responsive designs is a real 

problem whereas before they weren't 
certain if it was a legitimate concern. 

Past that, T don't think it makes sense for 

designers and developers to worry too 

much about src set right now. It is a draft 

spec, that is getting a lot of feedback and 

suggestions for improvement. The initial 

syntax was confusing even for people who 

spend their days in the bowelsof browser 

rendering engines. Because of the confusion 
it caused, 1 expect src set to be modified in 
some way to address the concerns that have 

been raised. 

It will take time for the best solution to be 

selected, and longer stilt for the browsers to 

Implement that solution, but I believe 

were making progress overall. 


99 


The new screen resolution standard 

The desktop standard of 1024 x 768 has finally been superseded 


A ccording to Slat Counter (w w w^t a t co u nte nco m> the 
popular desktop resolution of 1 024 x 768 has finally 
been overtaken by the more spacious 1366 x 768 
resolution. Aodhan Cullen, StetCounter CEO said, 'The screen 
resolution size people ere using is a critical factor for 
developers when it comes to web design, particularly in the 
case of fixed-width web pages,' 1024 x 768 has been the 
dominant resolution since early 2009, with over a forty per 
cent market share. This has declined to just under 18 per cent 


in March 2012, while the 1366 x 768 resolution has grown to 
19.28 per cent with the 1280 x 800 just behind at 13 per cent. 

This is good news for those building for desktop, but how 
about responsive design? The 1024 x 768 resolution has been 
a poor choice for desktops, but it suits the iPad. Does more 
screen estate mean images will be bigger, leading to larger file 
sizes and more issues for responsive designers? It looks like 
responsive image issues are here to stay, but Web Designer 
knows it won't be long before a solution hits the web. 
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news 


Discussing the hottest topics in the web design world 



Firefox, Internet Explorer and Chrome are all battling to become the number one 
browser. Find out who’s heading to the top and who’s heading for the slop 


J ust over a decade ago Internet 
Explorer ruled the roost, but 
thankfully Mozllla were not 
prepared to sit bock and let the 
Microsoft browser rule our lives. Firefox 
proved to be a viable alternative and its 
popularity saw it gain a significant share of 
the browser market. Following in the 
footsteps of Firefox. Chrome has seen its 
stock rise, eventually taking the top spot 
In recant rnontfis Internet Explorer and 
Chrome have been vying for the tide of 
most popular browser worldwide, with 
Firefox nipping at their heels. The trio of 
browsers have all been around 30 per 
cent However. Internet Explorer's share 
has been slowly falling while Firefox has 
levelled out, and Chrome going up. Since 
July 2006, Internet Explorer has seen a 
steady dedine from a dominant share of 
nearly 70 per cent to 32 per cent today. 
These figures are mirrored in Europe, but 
in the home of Microsoft, North America, 
the decline has not been so severe, 
dropping from 67 per cent to 38 per cent. 


In Asia, the drop in popularity has been 
much more severe, dropping from 79 per 
cent down to 32 per cent. A surprising 
figure considering China has by far. the 
biggest percentage of iE6 users worldwide 
- 24 per cent according to www. 
ie6countdown.com} 

Firefox has seen a very slight decline 
globally over the same period, starting out 
at 26 per cent and finishing half a per cent 
tower In Europe the pattern Is very modi 
repeated dropping from 36 per cent to 31 
per cent while in North America the drop 
b from 26 per cent to 22 per cent. 
However, in Asia, Firefox's popularity has 
been on the increase, rising from 18 per 
cent i n July 2008 to 24 per cert in May 
2012. The slight downturn in Rrefox's 


figures is thanks to Google’s rabid 
marketing far Chroma And, in truth, while 
Firefox Is still great. It has more competition 
and is struggling to match its competitors. 

Chrome has been the big winner over 
the same period. Since September 2008 It 
has risen from a one per cent market 
share worldwide an impressive 32 per cent 
In May 2012. Europe is almost unchanged, 
rising from one per cent to 29 per cent 
North America has seen an Increase from 
one per cent to 26 per cent, while Asia has 
seen the biggest rae oyer the same 
period, hitting 38 per cent in May 2012. 

The rise of Chrome is not an dissimilar 
situation to the path of Internet Explorer: 
Google is the world’s biggest search 
engine and Microsoft is world's most 


popular OS Both brought out a product 
that would immecfiately boast a massive 
audience. However, where they do differ, 
slightly, is that Chrome is not a component 
of the search engine and needs to be 
downloaded separately. But this is a moot 
point considering Google's global 
influence. However the reason for its 
popularity does not simply l*e In the 
logistics. Chrome is lightweight, fast secure 
and has good integration with other 
Google services. And, the browser's 
popularity is not simply based on the 
average consumer it is also extremely 
popular with web designers and 
developers. A quick Twitter poll by Web 
Designer revealed that Chrome was the 
most popular browser at 59 per cent with 
Firefox getting 23 per cent Opera 12 per 
cent. Safari 6 per cent and Internet 
Explorer zero per cent 

Why is it so popular? For all the reasons 
mentioned above and a great set of 
development tools, it seems Google's 
world dominance as set to continue. 


its Since July 2008, Internet 
Explorers popularity has seen 
a steady decline worldwide •§ 


<news ClOUCl> .- Adaptive 

Bite-sized coverage of the month’s trending topics tcSlgl 1 

Android Jelly Bean i*r~^ AndfOitl 

Jelly Bean 

GOOGLE 


According to 


The Google Developers conference. I/O 2012, is 
expected to announce the release of the latest 
version of Its Android OS. Jelty Bean. It is rumoured 
that the new OS will include a Siri-like voice assistant 
and Chrome will be the default web browser. There 
Is also expected to be an announcement about a 
Google tablet. Exd ting times. 


CTO,CBS 
Interactive, 
adaptive design' 
lias failed 

New OS to 
support SO inch 
tablet screen size 


Gumby 

""Windows 8 


Search giant unveils new Ghromebook and 
CliromebcK, a Mac mini style computer 



v The unofficial WP AppStore allows users to install 
plugins and themes direct from Dashboard 


A new responsive 
framework 
called Gumby 

Gumby i$a 'new responsive 9GQ grid 
CSS framework that you're already 
familiar with'. It's a malleable grid 
framework that includes a host of 
features such as hybrid grids, styled 
forms, easy to implement buttons, 
flexible tabs and PSD templates. Find 
out more information at www. 
gumbyframewQrk.cQm. 
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Find news and feature items at © www.webdesignermag.co.uk news 
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Top 5 Browsers (Europe) 

May 2011-April 2012 


Opera * 


■' Firefox 


Safari 


Chrome - 


Internet 

Explorer 


Conclusion 

The top three browsers are a lot 
closer than in countries outside 
of Europa Firefox and Internet 
Explorer have seen a slow 
decline over the stated period; 
internet Explorer down from 35 
percent to 29 per cent Firefox 
down from 36 per cent to 30 
percent. Conversely, over the 
same period Chrome has seen a 
significant rise from one per cent 
to 29 per cent 

Source; gs.5tslcounljEy.com 


Top 5 Browsers (Worldwide) 

May 2011-April 2012 

Conclusion 

Internet Explorer still rules the 
roost across the globe, but 
this is due much to the fact 
that developing countries 
and enterprises are still 
clinging on to older versions 
of the IE browser To get a 
true reflection of its 
popularity, these need to he 
taken out of the figures, 

Source; 

as5tatcountercomi 
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□me Internet Explorer 
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Get great digital mags! 

Get all our mags on any device with greatdigitalmags.com. 

At long last the definitive guide for digital creative*. Web Designer 
magazine, is available to read on your PC or Mac thanks to our digitaI 
editions super-site, www,greatd»gitalnnags,com. The site brings 
together Web Designer's offerings on Apple's Newsstand and Zinio, 
allowing you to enjoy your favourite mag on PC, Mac, Linux, 
smartphones or tablets. There are some incredible subscription 
Incentives up for grabs too. not only for Web Designer but for all 
Imagine Publishing titles, that are bound to save you some of your 
hard earned cash, To find these amazing deals, head overtowww, 
grentdigitnimags.com today, where you can find links to back 
issues, subscriptions and more, across almost every platform. It'S all 
available in just one place. 


Amazing new 
space magazine 
blasts off 

All About Space, the most 
exciting space magazine 
ever, will hit the shelves on 28 
June 2012 

W eb Designer's publisher Imagine Publishing 
is proud to announce the launch of All 
About Space, which will be available in print 
and digital formats from 28 June. Packed full of cosmic 
content, All About Space will delva into toe wonders of 
space exploration, astronomy and space science every 
month, providing m^pth knowledge from a team of 
experts cn an amazing array of topics. The magazine is 
unlike anything else out there and will appeal to seasoned 
space fens and new explorers alike, with a regular dose of 
amazing articles, exclusive interviews and jaw-dropping 
images that will make each issue simply unmissable. 

The first issue kicks off with a giant feature on the 
wonders of space, revealing the exdtmg missions that will 
be making headlines in the coming years. Elsewhere you'll 
find articles on the new race to toe moon, futuristic space 
planes, nebulas and much more. All About Space will also 
finally make astronomy accessible to everyone, with a host 
of stargazing articles explaining how to buy a telescope 
and what to look for in the night sky. 

Dave Hatfield Edfor-ln-Chief, said; "All About Space t$ 
the most exciting magazine launch since How It Works 
Space is a mind-blowing topic and we're confident that 
anyone who is fascinated by the incredible universe 
around will find All About Space to be the most amazing 
space magazine in this world or any other." 

All About Space will be available online at the Imagine 
eShnp f www.imagineshQpLCo.uk ) and in all good 
newsagents and supermaikets from 28 June. You can also 
download the digital version for iPhone. iPad and Android 
from www.qreatdiaitalmaqazine5.ciom Visit toe website 
at www.spacean5wers.com to get your space fix now. 
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Your emails, tweets, forum comments. The social network but in print 


This month we discuss the pros and cons of responsive design, implementing WP themes and how augmented reality has evolved 



subject More jQuery, please 

From Stirling Kramer 


I’ve been reading your magazine for about the last 12 months and I 
have to say I really enjoy what you are doing. You have helped me 
make sure that my HTML and CSS skills are current and complete. 
However, I think I'm ready to move on to the next stage in my web 
design career and I have decided that JQuery fs the next step for me. 
Can we have more jQuery features and tutorials please? 

jQuery is a sound choice .Stirling; it will look good on your CV and 
is a great companion for HTML and CSS. Web Designer is fully 
aware that jQuery is on the radar of many of our readers and we 
aim to accommodate the JavaScript library as much as we can. 



We try to ensure there is at least one jQuery tutorial per issue. As 
for a jQuery feature, there will be one soon, we promise. 


subject Responsive 
design is 
annoying 

From Julian Spencer 


Web 

Designer 

tutorials 

Discover the 
techniques to help 
create Inspirational 
and interactive 
webpages 



Animated infographics 
with HTML* CSS & 
jQuery 

tofUyfrP6X(4 



Creative blog theme 
mocknps with Photoshop 
bit.lyfuusMPV 


Build mobile apps with 
Sencha Touch 
blt.ly/ugkjdr 


Responsive design is Uhe latest 
technique for getting a website 
onto a mobile device without too 
many alterations, Gut surety this 
Is a compromise as the desktop 
version of a site will need to 
contain many of the same 
elements as the mobile iteration. 

I know that a single site for all 
devices is a great idea, but tor me 
It's a bit of a cop-out. And, at its 
current stage, there is no agreed 
standard, so-designers are 
coming up with their own 
solutions. Personally. I would like 
to see a bespoke version of a site 
especially built for mobile. This 
may take a little longer, but the 
end product would be much 
better suited to the device it Is 
being viewed on. So come on, 
everyone, make an effort and 
start producing great desktop 
and mobile versions of a site. 

There is no -doubt that 
responsive design is the In 
vogue' technique for building 




websites. It has a lot of great 
qualities - chiefly, one site 
sufficing for all devices, and this 
scenario works well for many 
sites. Admittedly, there are still 
issues, but they will get ironed 
out and eventually a standard 
will come to the fore. 

A custom or bespoke 
solution is ideal If the designer/ 
developer has the time/budget 
and the site needs it. Ultimately, 
when building a website, it's 
about picking the right method/ 
technique that achieves the 
desired end product whether 
that is responsive or bespoke, 

subject WorcjPress 
tutorials 

From Shaun 


1 have seen your theme design 
tutorial, but do you have a tutorial 
on how to implement the theme 
to work with WordPress? 


HTML, PUP and CSS files which 
are packaged to create a 
theme. Implementing a 
WordPress theme Is a relatively 
painless task, ensuring that all 
the right files are in place. The 
easy way to implement a 
custom theme is to examine the 
current elements of the theme 
- eg header, php, footer, php, etc 
(this will dif fer from theme to 
theme) - and then style the 
elements using CSS. 

You can find a couple of 
tutorials on the Web Designer 
website that will help: Create 
your own WordPress theme r 
C blt.ly/m64CP ) and Create a 
customised WordPress theme’ 
(blt.lv/5GYvrp) . 

Whatever 
happened to 
augmented 
reality? 

Front Mary Mayer 


A Word Pre ss th e me is Augmented real i Ly. or AR, was all 

effective ly a col le ct i on of the rage a ecu pie of years ago, 

ii a WP theme is effectively a 
collection of HTML, PHP and CSS 99 
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Join the conversation as it happens on Twitter Q @webdesignermag 
Comment on the news and opinion @ www.webdesignermag.co.uk 
Email the editorial team at O webde5igner@irnagme-publishing.co.11k 


but I'm not sure what happened 
to It. Is it still around? 


images and we need to know 
how to add the new shots. 


The technology is still out there, 
Mary, and it won’t be going 
away anytime soon, AR has 
made its way Into games and 
apps - especially devices with a 
camera, such as smartphones 
and portable games consoles. 
Find o Jt the latest happenings 
via the Venture Beat site: 
venturebeat.com/tag/ 
augmented-reality and check 
out Google's Project Glass. 

subject Adding images? 

From Robin Holmquist 

1 would like to get some guidance, 
if possible. My company has just 
built a website but we want to 
change the pictures on It. We 
would like to take some new 


Adding new images to a website 
is the same process as adding 
an Image to the original HTML 
page. Wherever there Is an 
image, simply change the 
source code to point to the 
location of the image, eg 
i mages/my ho m e pag e b a ck, p ng. 
Change the name of the file and 
upload the HTML page to 
overwrite the current version 
and upload the image to the 
appropriate folder, eg Images, 
However, be careful if the 
images are different sizes. If the 
original image sizes are 
included the new image will be 
set to that scale; so, either 
remove the sizes altogether or 
add in the new dimensions. 



ANDROID MAGAZINE 

There are over 100 million Android-powered devices around the 
world, and over 300,000 apps to choose from and Android 
Magazine is the only publication dedicated solely to this platform. 
The title gets under the skin of the OS. and offers a host of 
step-by-step tutorials and features on how to use, hack and 
improve any Android device. The latest issue looks at everything 
you ever needed to know about hacking and! tweaking an 
Android phone, plus there's a full in-depth review of the Samsung 
Galaxy S III. For more, goto www.littleoreenrobot.co.uk 


Comments from the Blog 

• Web Designer is always keen to 
hear from its readers, followers 
and visitors. Here we gather a 
few comments from the last month 

Comment on Web Designer going onto Zinio: 
Phan torn Maelstrom said: 

Interesting,,, I love technology - it just keeps getting 


better and better 



@mountainash 
Well done, @ 
johnallsopp, Your #CSS3 
transformations tool is 
#1 in the J 5 online CSS3 
tools' in this month's 
@ Web Des igner Mag 
(issue 196, pg 39) 


r 1 
l A 


Hey #webdesigners @ 
lADTSanAntonio! 

Who are your fave 
#webdesign Twitterers? 
We like @ 
WebDesignerMag 
among others 


r i 


@agcolom 

Just received my 
latest copy of Web 

Designer and I love 
the new web 
developer section: 





@ChadStrat 
@WebDesignerMag 
How about another 
concretes article? 

I’d love to write 
one for you 



' ' ^co 1 

Search & buy 

.eu 
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©Better prices 
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.me 
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Ben Frain lives a Bruce Wayne-esque 
double life as both a technology writer 
and freelance front-end web 
developer. His book, ‘Responsive 
Web Design With HTML5 & CSS3' 
is available now from all good 
retai lers. You can follow 
him on Twitter 
@benfraln. 
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It’s absurdly popular, but is it responsible to always be responsive? 


I t would be easy to brandish authors of pro-responsive web 
design material and advocates of the methodology as 
zealots. It's certainly easy to look at the glut of responsive web 
design based material (hands up. I’m an offender} and wonder if the 
whole thing is Just another passing fad? 

Responsive web design is a technique; a means to an end. 
Nothing more. It is not the Alpha and Omega, a magic bullet to 
create the perfect user experience In all situations. 

But at the same time it is a very powerful set of techniques. It 
offers front-end developers easy-to-master methods (essentially just 
HTML and CSS) of offering a more compelling visual user experience, 
regardless of the browser viewport size viewing it. It might be a TV, 
smartphone, tablet or virtual wrist browser- a responsive web design 
won't care. Admittedly there is no virtual wrist browser I'm aware of, 
but l r m convinced a responsive design would have the best chance 
of looking good on that too. The thing Is. a good responsive design 
doesn't (or shouldn't} make assumptions about the device. It doesn't 
just cater for 32Qpx and 768px widths because they are the 
breakpoints of the current iPopular devices. It should offer the best 
possible experience whatever canvas size it's viewed on. 

In addition, it’s worth noting that a responsive web design relies 
on a single code base, rather than separate distinct ones, as is 
usually the case when going the 'device experiences' route. This can 
be a good or a bad thing - it’s all about what you're trying to achieve. 
It may seem like a cop-out, but there’s no automatic right or wrong 
way to build something. 

Despite this, although responsive web design isn't necessarily 
always the right choice, I'd argue in the absence of something better, 
or without a compelling reason not to, it should be the default 
choice. The fact Is that the amount of differing devices accessing the 
web is growing. That’s a trend that shows every Indication of 
continuing. As a developer, do you have some capability to respond 
to that situation and offer a better experience for users on all 
devices? If not, learning the techniques of responsive web design 


offers you some capability to do so for a meagre learning curve. For 
that reason alone, it Is worthy of your attention. 

However, the important thing is this: a responsive web design isn't 
the only way to provide a great user experience for users across 
different devices, and ultimately, that's all we should be attempting 
to do. Our users visit our sites or applications for something. Let's 
Just allow them to do that in the fastest and most pleasurable 
manner we can. How well a site or application allows users to do 
what they came to do Is important, not how we built the experience. 
Plus Che layout presented is merely one aspect of building a good 
experience for users. Site speed for example, is arguably just as 
important, yet doesn't get the attention it perhaps deserves. 

However, just as our techniques should adapt and change, 
acknowledge that the things we build are temporary. People often 
liken building websites to architecture. The notion being that they 
are attempting to build something that will last. It's a noble notion. 
But how many sites you builL five years ago are still in the same 
form? Would you build them the same if you had to rebuild them 
now? Would you build them the same way in even two years time? 

We're not architects. The things we build won't last: accept that. 
We build sand castles. They are here for mere moments, marvelled 
at and enjoyed if we are very lucky, then washed away. 

That doesn't mean we shouldn't strive to build things more 
beautifully and functionally than those that have gone before, and 
employ the best practice ways in which to do so. But do it because 
doing so makes it easier for you to build what you need, easier tor 
fellow developers to extend your work, and ultimately because it 
makes the user experience better. Don't labour under the illusion 
that what you build and how you built it will stand the test of time it 
wont So Just use the tools available to you to get the job done. 

What we use to build websites and applications for the plethora of 
possible devices is ultimately unimportant. That we have some 
means to build them at all, and that people can hopefully use and 
enjoy them, however transient they may be, is-. 


How many sites you built five years ago are in the same form? 
Would you build them the same if you had to rebuild them now? 
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Pay As You Go 
Advertising 

Advertise on Google. 

Pay only when people click on your ad. 


For most types of advertising, you pay for people to see your ad. With Google AdWords advertising you 
on ly pay when they dick to visit you r website. So you get exactly what you pay for - more customers. 
And because this is pay-as-you-go advertising, you have complete control. 



Control how much you spend 

You can seta daily spending limit and an amount you're happy to pay for people to click 
on your ad. The price is chosen by you, not us, so you never have to worry about going 
over your budget. 



Control who sees your ad 

Your ad will only appear when potential customers are searching online for relevant 
terms youVe chosen to describe your business. 



Control where and when they see it 

You can choose to target your audience by location and time: attract local customers 
during your opening hours or, if you'd rather, promote yourself to a global audience 
round the dock. 


Voucher missing? 


Don't worry, someone in your company may 
have beaten you to it. Track them down and 
make sure they're claiming 


nay^^ 


£50.00* free advertising credit 


with Google AdWords for your business. 

No minimum term or commitment 

Offer only available to businesses in the UK. 


Don't miss out - try it today 

We're offering £50.00* free Google AdWords 
advertising credit for business users**. There's 
no obligation to continue - you're in control. 

To start attracting new customers today: 


Visit fioo filexo. u k/ads/st art 


Or call 0800 169 0478*** 



to 0200 number's arc free from BT landllncs but charges may apply i f you use another phone company, cal from your mobile phone 
or call From abroad. 

**Terms and conditions apply. Promotional credit can only be used for .AdWords accounts Chat are less than 14 days old by advertisers with 
a billing address in the UK. Advertisers will be charged for advertising that exceeds the promotional credit. Advertisers will need to suspend 
their ads if they do not wish to receive additional charges beyond the free credit amount Offer subject to ad approval, valid registration and 
acceptance of the Google AdWords Programme standard terms and conditions. The promotional credit is non^transferable and may not be 
sold or bartered. In some cases, advertisers who choose prepay billing may be subject to a £10 minimum prepayment beFore their account is 
activated. Any such prepay amount will be credited to Advertiser's account once account is activated. One promotional credit per customer. 
For full terms and conditions please vigil hMm/Avww.ftnnale.cn.ijk/adwnrds-vnLJcherlerrnii.. Google Ireland Limited, a company incorporated 
under the Isaws nf Ireland, with company registration numbe r 3GRD47 and registered office address at Gordon House, Barrow street, Dublin 4, 
Ireland. Copyright 2012. Google and Gnngle AdWords are trademarks of Google Inc, and are registered in the US and other countries. 


Google 





Sarah is a designer specialising in 
iPhone and iPad UIs, She works as 
both a cons ultant and a designer to 
various brands in the UK and 
abroad, as well as speaking 
regularly at web^related 
events all around 
the world. 
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design 


Organise your workflow to optimise your responsive design output 


W orkflow can seem like such a small, mundane part of 
your everyday working life, However, having an 
organised workflow can make or break a project, and 
stop it spiralling into an inefficient use of time. 

Responsive web design has entirely reshaped the way we work, 
and if it hasn't hit your studio or workflow yet, it should, The hardest 
thing is finding a rhythm that works. I spoke about this at ‘Future of 
Web Design' recently, and It's not about the actual 'doing’ of 
responsive design. It's finding a workflow that includes and educates 
the clients in a comprehensible way. 

I've found that everything with this new workflow needs to start 
with content, as without content there is no site. There’s a bit of a 
chicken-and egg situation as to whether we should sketch out 
content blocks first, and then ask the client to fit their content around 
the predefined blocks, or whether we should fit our design to the 
agreed content. I like to do a bit of both, and always offer a content 
review to ensure the client is using the most coherent text for their 
website or app. 

I've got two new employees starting this July, and it has made me 
entirely re-think my current workflow as I'll be going from a one to a 
three-person studio. It can't exist in my head anymore; it needs to be 
a concrete and understandable process that can be replicated time 
and time again. We already have a concrete workflow for sending 
out proposals and initial client: contact and contracts, but responsive 
design has posed an entirely new problem - there is no longer one 
size that fits all. 

I've had a couple of workflow problems crop up recently - both 
web based - whereby the client hired me to complete the user 
interface design of a project. They wanted static 960 PSDs provided. 
However, because I rarely provide Just PSDs anymore anyway 
without completing the HTML/CSS myself (you get a neater result 
this way) I also felt I should provide versions that would work across 
smartphones and tablets. I did this off my own back, for my own 
integrity as a designer. As the saying goes, no good deed goes 


unpunished - cue pixel-pushing from both clients that spanned Into 
weeks, not days, because the designs looked so vastly different 
when stepped down into smaller si 2 es. Responsive design is going 
to mean a heck of a lot more work, and much more client hand' 
holding than 1 think any of us ever anticipated. 

We "re adapting the way we work to address this. We'll be starting 
to provide 'style guides' rather than set canvas PSDs for slicing; 
instead well see how elements will look across various breakpoints 
and p ut together a mood board of the overall look of the site Instead. 
A 9&Qpx PSD is simply not adaptable enough anymore and can be 
taken far too literally when working across various sizes. 

These style guides are being adopted by big brands as well, I 
noticed Starbucks have ditched the literal PSDs in favour of a more 
'pick and mix' method by providing sizes of elements from extra 
small to extra-extra-large across various pieces of User interface - 
unlocking the world of responsive design perfectly. We need to start 
thinking in terms of pieces of puzzles, rather than finished pictures. 
MallChImp have been doing this for a little while, providing their own 
pattern library for their developers and designers to dip in and out 
of. These include buttons, grid units for layout, hover lists, navigation 
and tab blocks. It’s quite a comprehensive library that would make 
easier work of most of the projects they undertake in-house. 

Other designers have been trying to find their feet with responsive 
workflow too. Jesse BennettChamberlain replied to my exasperated 
tweet the other day regarding responsive workflow, saying that he 
had found using Adobe InDesign helpful for responsive layout, It 
enables you to lay out all the content and then tweak the bounding 
boxes to see how content flows downwards. Effectively giving you 
quick layout comps that can be shown to clients. 

Workflow Is very much a personal process. You find your way of 
working or fit with existing company process as neatly as you can. 
Rarely do we find parts of our jobs that rock our otherwise solid 
workflow foundations, but unfortunately, responsive design is 
looking to he one of them. There are tricky, but exciting, times ahead, 


Workflow is a personal process. You find your way of working or 
fit with existing company process as neatly as you can 
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With more than 6,5 million contracts worldwide, 1&1 is a leading web host and domain 
registrar. 1&1 is a recognised partner of most of the world's largest Internet registries. 

We can offer you a wide range of domain extensions, including .co.uk, .info, .biz and .eu. 
Register your domain name with l&l today and benefit from our unmissable domain offers! 




Included with every domain: 

✓ DNS Management s/ Masked URL Forwarding ✓ Domain Contact Management 1 / 1&1 WebsiteBuilder 
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JQUERY MOBILE: UP AND RUNNING 

£22.99/$29.99 

mm&om 

O JQuery is the JavaScript library 
that designers and developers 
have adopted to create dynamic and 
interactive pages. This book looks at 
its mobile counterpart, and establishes 
both why you need it and how to use 
It jQuery Mobile: Up And Running 
concentrates on specific elements 
where JQuery Mobile can be applied, 
and how to create a mobile web app 
for all the major platforms. The book 
demonstrates how to create mobile- 
friendly lists, forms and nav bars, plus 
how to customise the Lil with themes 
and CSS. It's a bit text-heavy, but there 
are some concise examples. It you 
need to get to grips with jQuery 
Mobile this is a great starting point. 


SKETCHING USER EXPERIENCES 

£ 14 . 75 /$ 19.95 

mkp.com 

Q Thls Is an Illustrated how-to 
guide for sketching out user 
experiences before you get down to 
creating the final online version. In a 

digital age, pen and paper are often 
neglected, but they still have a crucial 
role to play Ideas need to be put down 
on paper and a sketch Is a great option 
to get a concept started. This tome 
uses step-by-step instructions and 
exercises, demonstrating various 
sketching methods that will enable 
readers to express their design ideas 
across time, The collection of 
techniques and methods all come 
together to create a toolkit from which 
the most appropriate sketch method 
can be selected and implemented. 


E3E3RE3 

THE UX BOOK 

E54.99/S89.95 

www.t heuxboo k,n et 

G TheUXBook\sa 

comprehensive - and heavy - 
full-colour hardback that 
concentrates on designing 
interaction that ensures a quality 
user experience. The text Is In depth 
and practical, and takes a time-tested 
process-and-guidelines approach that 
provides readers with actionable 
methods and techniques. The book 
guides the reader through the UX 
life-cycle process, including contextual 
Inquiry and analysis, requirements 
extraction, design Ideation and creation, 
practical design production, 
prototyping and UX evaluation. There is 
a lot of theory in here to go alongside 
the practical aspect which makes it a 
lifelong, but expensive, companion. 


HHE 3 H 


THE WEB DESIGNER’S 1D1 
MOST IMPORTANT DECISIONS 

£ 14 * 99/$25 

www.il ex-p ness .com 

Q The web-design process is far 
more in depth and intense than 
simply building a webpage, and this 
178-page book takes a look at 101 key 
decisions that need to be taken into 
account. The book breaks down the 
process and presents the decisions to 
be made in a logical and practical 
order, starting with 'Why do you need 
a website?' It then progresses to 
planning, technologies, stylesheets, 
HTML, web hosting, audio, video, 
blogging, the principles of navigation 
and much, much more. This title is far 
from a comprehensive guide to all 
aspects of online design - rather, it's 
more like a bandy checklist for anyone 
building a website from scratch. 


BOOKMARKS 

This Issue weVe focused on some of the essential tools that 
web designers need In their skill set UX, or user experience, 
plays a big part in the process, and we have a couple of books 
to help produce engaging, user-friendly webpages. There are 
some top tips for jQuery on the small screen and over 100 
snippets of advice that every web creative can benefit from. 
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HotGloo 

From 


Wireframlng and prototyping are key parts of the 
site-building process. HotGloo can be used to 
visualise the planning processes, co’work with 
team members, co-ordinate contents with clients, 
plus provide a precise framework for designers 
and coders, Theresa host of plans starting with 
the Free Plan (one project, five pages and one user). 


Starred 

From 


Starred Is an app that turns 
Twitter favourites into a useful 
reading list of features and 
articles. And the best bit is that 
any list can be shared with 
others. Typically, favourlted 
tweets simply get lost or 
forgotten - Starred will put them 
into a coherent reading list and 
give them value once again. 


Chrome Beta 

From 


The speed and agility of Google 
Chrome Is set to make its debut 
on Android phones and tablets 
everywhere. Currently in beta, 
the browser offers accelerated 
page loading, scrolling, zooming 
and the ability to open and 
switch between unlimited tabs 
in an easy-to-view stack setup. 
The full release, when available, 
is set to become the standard 
Android browser. We can’t wait’ 




WEB SERVICES 


ft HotGloo- 

HatGloawill change 
the way you 

Hot Ntnce 
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Domani 


www.domanistudios.com 

Development technologies Client-side MVC framework, animated GIFs, HTML, 

CSS,. JavaScript, optimised for iPad 



Designer Jonathan Hills 

www.domanistudios.com 

Domani Studios' site uses bold imagery that packs a 
punch and illustrates the agency's technical prowess 

little unexpected,' said founder. 
Jonathan Hills. Domani also ensures 
that the site looks its best on mobile 
platforms, most notably the iPad. The 
site when viewed on a tablet doesn't 
look like It Is forced Into the constraints 
of the device, but purpose built What's 
dear is that the independence of the 
studio shines through with the design 
of its site, as Jonathan concludes: 

"There are some really nice agency 
sites out there, to be sure, but the 
majority of them always struck me as 
pretty stale and safe. We wanted to 
make sure that, as an Independent 
agency, we did not fall into that same 
trap. We worked hard to make sure that 
the site had a colourful spirit to it that let 
visitors know that we not only do great 
work, but we also have fun doing it; 

## Above all else we wanted a site 
that reflected the spirit of the agency 
- something that was both vibrant 
and a little unexpected 


*•*«••#*«•###*****•• 


iMiiiiffttttuilili 


evetoping a site for your 
own agency can be one 
of the most important 
projects to get right, The 
Domani site uses a clean 
design approach and 
avoids the trap of filling 
up each page with 
images or motion 
graphics in an attempt to 
grab attention. 

The initial image fades offering up 
the agency r s latest projects with the 
Information pages using smooth 
horizontal scroll that itself is a refreshing 
change to the vertical scroll that many 
similar sites have now adopted. 

"Above all else we wanted a site that 
reflected the spirit of the agency - 
something that was both vibrant and a 



* The Domani website loads quickly and presents 
the Ti rst or Its bald Images to the viewer. From this 
opening screen each of the main departments of 
the site can t>e reached 

abcABC 

1234567890 

abcABC 

1234567890 

< Ah owe, top tubutt'im* 

- TtwiPT version af Futura is derived from Paul 
Ren nef’s orig ina I font from 1927. The typetace is 
part of the TypeK it service 

* Om nes Pio Regular and Semi bold were desig ned 
by the Darden Studio, based in Mew Vork. The full 
setaf ranis is available (ram TypeK it 
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creplBft.cltrckwfeB* 

* Even Domani’s recroitme nt pa rje is a 
lesson In elegant design showing an 
attention to detail that potential 
employees will no doubt appreciate 

■ Fast and smooth horizontal scrolling 
is used th roug hou t Domani's 
information pages. Everything you 
need to know isdisplayed with the 
agency’s consummate design skill 

* Cl lent sites are shown off with 
stunning intro pages that then lead to 
mare detail ot the construction 

* The culture or Damanl conies 
throug h on every page I ncl ud Ing its 
services and process page that 
delivers Insight into the company's 
design sensibilities 


<BeloW> 

* The Domani site Is littered with images of its 
team hard at work. The dyna m Ism a nd fun I n 
these Images Is clear to prospective clients 
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Know a site that deserves to grace these pages? Tweet us now } ©webdesignemiag 


We Are Maersk 

www.wearemaersk.com 

Development technologies IITMl. CSS. Rash, customised Google Maps. 

external APIs for database of Maersk data 




Designer LBi 

www.lbidenmark.com 

Video and data come together seamlessly on the 
Maersk site that offers a detailed insight into the 
shipping company's operations around the globe 

digital corporate brochure, which can 
support Maersk's corporate website." 

Michael Christian Storgaard at 
Maersk: also commented; 'The design 
alms to visually dazzle the user through 
extensive use of videos, images and 
graphics as well as using Google Maps 
in a more animated way than what you 
would normally expect. It also breaks 
with the conventional approach to B2B 
communication in both the visual and 
technical execution.’ 

The site is not only a technical marvel 
(it uses live data for some of its content} 
- it also breaks the mould when It 
comes to 'business' web design, and 
shows that even potentially mundane 
subjects can be made exciting. Truly, 
few sites recently have integrated video 
as thoughtfully as this one. 


* * * * * * * 4 


****** ••« 

***** «* 

***** *4 

****** ** 

***** * 

*##*****•*•' 


t the heart of the We Are 
Maersk site is a 12-minute 
film directed by 
Christoffer Boe that 
takes the viewer on a 
Journey through Maersk 
a company that 
touches everyone with 
the goods it transports. 
The use of video to tell 
Maersk’s story is a 
masterstroke, as a more conventional 
website design could easily have 
become just another corporate portal 
with little engagement. 

As LBi says; “The aim has been to 
leverage the 'We Are Maersk' movie 
material digitally and expand the visual 
universe with background articles, data 
and facts. The site Is a modem, dynamic 


will The site is a modern, dynamic digital 
corporate brochure, which can support 
Maersk’s corporate website P i 


ABOUT MAERSK 


<Ahov*> 

* After a video introduction that gives background 
to the activity tbal Maersk is involved in you can 
then ]um p right into the website 



<Alicnre> 

* The map is the central hub around which the rest 
of the Maersk site orbits. Data tracking gives a real 
sense of Immediacy that engages the viewer 
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abcABC 

1234567890 


tAfiore* 

• TheZetta font family is lire official typeface of 
Maersir, Designed by Jonas Hecksher, it ks 
aval la ble from the Piaytvpe font foundry 


<Twp left. cluckwisB* 

- Using Google Maps, the homepage of the site 
jumps straight to your part of the world giving 
Information about Its business activity 

•The interactive maps tract Maersk's ships and 
also give you the c hance to find out more about 
what your country is doing with Maersk 

- Video is at the heart ot this site. Click on a 
subject that Interests you and the site 
seamlessly presents the footage 

* Each video also has several supporting pages* 
many of which are them selves animated to 
impart their inrormation in an exciting way 



#CF02D1 H IF JCSfl -H2F4&3G 
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Know a site that deserves to grace these pages? Tweet us now ) @webdesignermag 


\m MARIA GAMIER 

lencienisn t tutiiTiuMsi 


KDK AiOtlf POflTrOLlO fllOQ MdlSI CONTACT 



M|Ld1 ] ■ | tm, I Italian vcnllng mtuff. 


Crafting Websites 

HiTK HEART t SOUL 




<Alnw 

* Injectl ng a sense of hurnou r Into a design can be 
fraught with danger, but lines knows howto go 
about It with the deftest of touches 


< Above* 

* The portfolio pages are bold and i ncl ude a series 
of large images, but thankfully this doesn't 
com promise on the overal l site performance 


<AboYe> 

■ As j Ul designer. I nes uses vlsua 11 nfograp h les to o utl ine her key 
ski ll sand the applications she is mast proficient in 



#060909 SFaFaFa #7CGSOE *EGB02F flFIFIFt #404040 
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<Abo«> 

► The homepage of this site leads you to a 
short vertical scroll that reveals the 
designer and some or her work 



* Personality Is a Iso an important component of 
lues's site. The photo pages g ive a n insight I nto 
her design sensibilities and interests in general 


Pure Pleasure Design 

www.purepleasuredesiqn.com 

Developmenttcchnoloyitsit I ITML5.CSS3 



Designer Ines Maria Gamier 

www.purepleasuredesiqn.com 

The portfolio site of this Vienna-based freelance 
screen designer is clean, concise and appealing, with 
a dash of humour thrown in for good measure 

The portfolio pages use large tiles to offer a 
snapshot of her work to date. Click through to 
the piece to see bold hl-res images that are 
optimised to ensure the speed of the website 
isn't compromised. The uncluttered approach 
taken with the page layouts presents 
information comprehensively to the visitor in 
either English or German. 

From the Initial homepage to the collection 
of personal photography Ines has ensured 
that her personality stamps its mark right 
across the site. The well-chosen colour palette 
is easy on the eye, however the portfolio 
pages still stand out. as they should to 
showcase the range of skills on offer. As an 
exercise In dean but effective Ul design. Pure 
Pleasure Design Is a stellar example. 

if Because of my love for details 
and Zeitgeist I tried to keep the 
design simple yet emotional ill 


s a Jl designer you would expect 
Imes's website to be easily 
accessible. And it certainly doesn't 
disappoint with smooth scrolling 
pages that deliver their content 
concisely to the reader. Using the 
vertical scrolling technique to 
good effect, your eye moves from 
page to page effortlessly: 

Ines explains the approach she 
took: "Because of my love for 
details and Zeitgeist I tried to keep the design 
simple yet emotional. 1 did this by not over* 
straining the user with information, colour, 
textures or illustrations. I tried focusing on the 
usability, but still managed to send the user on 
a journey with the right wording and style.' 
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< design tiiary> 

| White Sheep Isobar / Angry Birds Space 



Ride the development cycle 




Toninii Niskancn, | 
M art director 


Lauri Kainulainci 


RobinPcUcrsson, UX& 
concept designiFW 


Project I Angry Wr ds Space 

Web I si*a<:c.ai*S*'y , ** 1 '* ls ‘ <:o,M 
Company I White Sheep Isoliai 

Web I www.whiteslieep.fi 


j 1 



->nr?TI 

y 


Mam 



A trip to the final frontier for the 
web's favourite birds was a 
challenge that White Sheep just 
couldn’t resist. 


The Angry Birds phenomenon has gone from 
strength to strength. The birds have been 
through the seasons and at! the way to Brazil, 
so a journey into the final frontier was the 
next logical step for creators Rovio. 

White Sheep Isobar, a digital creative agency 
based in Helsinki. Finland, who had worked 
with Rovio before, was called into the fray to 
actualize the project. 

Joonas Virtanen; 'Prior to this project White 
Sheep Isobar had already crossed paths with 
Rovio once before. In 2011 we designed and 
produced a huge 3D projection starring Angry 
Birds and the Nokia NB that was shown at 
5X5W in Austin, Texas. It was a big hit and I 
guess the Rovio guys liked our style, since a full 
year later they asked for our help in launching 
the new Angry Birds Space website. We gladly 
accepted the challenge. Rovio had a pretty 
good idea of the content they wanted to show; 
everything else was up to us. The deadline was 
extremely tight as the new game (Angry Birds 
Space) was set to launch in a couple of weeks, 
but we wanted to see how far we could go 
with the concept The project was extremely 
interesting for many reasons: working with 
Angry Birds is cool enough on its own and it's 
not every day you get to work on a website 
that will draw a multimillion global crowd 
immediately at launch.” 


fhe White Sheep Isobar 
team gel to spend some 
much needed pavement 
time together 
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White Sheep Isobar / Angry Birds Spac: 
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Getting the trajectory 
r^ht for the orbits was 
crucial to how the birds 
reacted in the game 




## In the end men 

p._S of the site became 

dakey part in pre-planning, sketches 
ct was complete 
Miskanen: “After getting 
■art the cote elements. 


he path stayed almost the 
s until the very end. 

Isitois would come from m 
-first approach natural. Hot 
excellent experience on 

-n of the site. With all th 

had to draw the line on w 

first-generation iP adx 


mechanics ana 
from the initial 
"We knew a 
which made a 

also wanted to have an 
desktop and tablet version 

devices out there, wet™ 
the premium experience, 
new iPad. IE6 versus chrome, f 

-In the end the mobile versn 

failsafe, and it helps with brow: 

since it was built so sturdily w< 

for all incompatible browsers. 

newer browsers and hette.-sl 
O xnon@nce, but nobody loses 
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/ The designers and 
/ thinkers at Ruvfo 1 

V decided to create a I 
1 comic strip to assist j 
I with promoting the J 
i latest version of toe ! 
i game. Each strip J 
i helps to sell the -J 
\ updated story 7 s 






Angrys Birds Space gets 
animated with this short 
promotional cip 
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< design diary> 

| White Sheep Isobar / Angry JBircls Space 


A tight schedule, mobile-friendly 
considerations and a whole heap 
of assets from Rovio helped to 
define the design side of the 
Angry Bird Space project 

Tommi Nlskanen: J, We got a lot of assets from 
Rovio (they even made an Angry Sheep for 
us and It was used on the site), which was 
awesome, and helped a tot because we were 
on a tight schedule. Other than that, the art 
direction and all the visuals were handled oo 
our side. I worked closely with the developers 
to create alt the graphics in a way that would 
make their lives easier and keep the site as Tight 
as possible, but still make it Took good." 


Promotional content 
tor the Angry Birds 
Space site had 
already been 
created by the 
game's designers. 
Whitesheep used 
these as inspiration 


for the site 
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White Sheep Isobar / Angry Birds Space | 





Joonas Virtanen: For once I could say that marketing 
the finished product wasn't a challenge. Anticipation 
and exdtement for the game were already in place, and 
immediately after launch the traffic numbers spiked up to 
the high beavans and have pretty much stayed there to 
this date. People love Angry Birds Space and thankfully 
they also love the website. Alter the launch several 
positive tweets complimenting the execution started to 
appear among the thousands of fengrybirdsspace 
tweets, it was a nice reward for the hard work done in 
those fast couple weeks. 

The site also pcked up couple of nice awards pretty 
quickly Angry Birds Space was featured as site of the day 
for the FWA and AWWWards. 


'Having our own little Angry Sheep on the site certainly 
did its job. too. It links to our agency's own site, and we are 
still seeing a steady stream of visitors coming here from 
the Angry Birds Space website months after the launch, 

Sheep and Birds go together it seems; 

design diary. 


#§ The HTML implementation 
relied on pure code if 

Rp7ier curves custom scrolling, triggered animations, optimisation 
working with touch interfaces and lack ot support In okler browsers 
were Just a few challenges White Sheep had to overcome 

Latin KaimiWneru "In the beginning <he biggest w e35V “ ^ 

challenge In development was to Implement the 
custom scrolling functionality that allows the bird to 
fly around. For this, a JavaScript library was created to 
move the viewport and the bird or Bezier curves. 

Another challenge came from the triggered 
animations that happen when the bird hits a pig or 
bashes through a metal plate White these would ve 


been very easy to create with technologies such as 
Flask the HTML implementation relied on pure 
code-based animation. The final challenge were in 
optimisation and getting the site to work nteefy wth 
touch Interfaces like the new iPads. In addition to tl ,e 
main site, a responsive mobile site was created for 
smaller devices and older browsers that lack support 
for CSS transformations" 
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The science 
of sounds 

















Web Designer makes its way to Sweden’s capital, Stockholm, to chat with the 
far from average music and sound production house DinahMoe. We talk 
about raising the bar for music and sound in interactive applications. Chrome 
experiments, and how it has Frank Zappa to thank for its name 

wlio DinahMoe what An integrated music and sound production house where Ostgdtagatan 27116 25 Stockholm, Sweden 
web www.dmahmoe.com 


inahMoe is the world's first 
integrated music and sound 
n :::::::: production house, it 

■***i::f specialises In muslcand sound 

ini;;!! for 3,11 Interactive media, on all 
platforms, as well as for linear 
m!m"m media such as film. DinahMoe 

IIIMMIMMlilMHI 

I is responsible for all aspects of 

the soundtrack for a production, 
from concepts and pre- 
production, to implementation and testing. The 
company was founded In 2008 by music producer 


.Johan Bel in, who has run a successful sound production 
company for many years. Between 2000 and 2007 he 
started several internet-based ventures, 

The goal with DinahMoe was to raise the bar for 
music and sound in interactive applications. The 
creative and quality reference was that of films, but with 
the added possibilities of interactivity. Interactive 
soundtracks were very far from their true potential 
Implementing sound is not a trivial task, which limits 
what you can do from a technical viewpoint. Developers 
often lack experience in sound design, white sound 
designers tend to know squat about interactivity. 























































Robyn Interactive Beat 
Machine allows fans to 
remix her music and 
video. Created with 
Nary Fagot. 



if DinahMoe has worked with the world’s 
best digital production companies ft 


Bel in developed a work process and a technical 
solution that put the power of sound implementation 
in the hands of non-developers with production skills. 
The purpose of this framework was not to solve a 
technical problem, but a creative one. It constantly 
evolves to realise new ways of using music and sound. 

DinahMoe has worked with some of the world’s 
best digital production companies and agencies: 
North Kingdom, ACNE Production, 8-Reel, Soleil Noir 
and Google to mention Just a few. In March 2012 
DinahMoe was inducted in the FWA Hall Of Fame, 
DinahMoe is a relative newcomer to the interactive/ 
digital Industry. Bel In gives an insight into how the 
agency was founded and how It has evolved: 


"DinahMoe was founded in February 2008, and 
interactive director Erik Brattlof joined in November, 
We were able to land some pretty big productions in 
the beginning, eg the Doritos Hotel 626 with B-Reel 
and 1 had hopes that we could grow quite fast, but 
then In the autumn of 2008 there was a global 
recession and everything stopped. All our prospective 
clients had to cut in their budgets and external costs 
come first, meaning us. We were lucky to find a really 
good creative relation with ACNE Production and 
have taken care of music and sound on almost all 
their digital productions since then. During 2009 we 
did our first productions with North Kingdom which 
also have evolved Into a long-term creative relation. 


The number and size of projects have been growing 
slowly and in the autumn of 2010 Oscar Eriksson 
joined as tech lead. In 2011 we got some attention for 
a site we did for Swedish artist Robyn - Interactive 
Beat Machine and even more for two Chrome 
experiments: ToneCraft. a 3D music tool, and PI ink, a 
multiuser music experience. After that things have 
started moving in a faster pace Production assistant 
Erik Lindell joined the team in the end of 2011, Right 
now we are eight people, some are freelance but with 
the Intention to become a part of the team.” 

Behind every name is a story. Belln explains how he 
was looking for a name with energy, and a URL to 
match: ‘I wanted a name that had to do with energy in 
some way since the goal for the company was to 
drive things forward, to change the game, I fell for 
Dynamo, According to Wikipedia the word comes 
from the Greek word dynamic meaning power. 
dvnarno.com was of course not available but Frank 
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ChristoffcT Johansson 
Intern 


Erik Brattlof 
Interactive director 


Erik Lindell 
Web sound engineer 



Oskar Eriksson 
Developer 




* - _ Johan Belln 

llKlllStiy creative director/ 

insight DiiiahMoe 



«If we do a Chrome only 
(and soon Safari too) then 
we can use the Web 
Audio API which is the 
best thing that has 
happened to interactive 
music and sound ** 




The Nespresso 
Bhjana site with 
SoleilNoir blends 
four music pieces 
together well, 




Piinkisa multiuser 
music experience 
that you can play 
online with friends 
or strangers. 



Zappa came to the rescue with the NSWF track Dinah* 
Moe Hurnm. The URL dfnahmoexom was available 
so that settled it. 1 think for some companies the URL 
is really Important, but we have completely spoiled 
that by choosing a name that nobody can spei" 

An agency’s web presence is a key tod for 
presenting its talents to the world. Befiin explains its 
importance for adding case studies: 'Since we do 
quite a lot of projects each year it is important to have 
a place where we can easily expose them. The work 
behind the scenes to create a good soundtrack can 
sometimes be quite elaborate, so we try to make case 
studies when there is something specific we want to 
highlight We also use Vimeo for site captures and 
information material, and SoundOoud for must 
tracks. We use other channels such as Twitter and 
Facebook to drive traffic to the website.’ 

Dinah Moe is all about sound, and Its reputation 
attracts new clients. Belln explains how there Is a huge 


need for their services and how the agency needs to 
grow organically: 1 think a lot of people know about 
us, and I know that some of them are just waiting for 
the right project to try working with us. Often our 
sales work is about giving them a call and that is 
enough to get some project rolling. We are still a small 
company and need to grow in an organic way, so we 
adapt the selling activities after this. 

“I think there is a huge need for the services we 
offer. The general quality of sound tracks is slowly 
rising, which means that the production companies 
spend more and more time on implementing sound. 
The complexity of the implementation grows 
exponentially with the ambition, which pretty soon 
leads to a point where it is no longer feasible to 
implement without a framework of some kind. In our 
productions we often have 10 to 20 different layers of 
sound playing at the same time, each consisting of 
several simultaneous sounds." 


Dinah Moe has worked with a host of bigmame 
clients and is looking to create long-term relationships. 
Relin describes the projects the agency takes on: “We 
are looking for creative relationships that span over 
more than one project, and then it is important that 
we connect on more than one level. We are going to 
spend quite some time together, often under time 
pressure,. Being able to have fun and enjoy the ride is 
important both internally and with our clients. We 
have had the pleasure of working with some of the 
most talented and creative people in the business. 
Many of them have become friends, and we are 
hoping to make more friends over the years. 

'"When we take on a new client it is some kind of 
commitment, some of the projects will be high profile^ 
others will not. We do projects in all sizes, for all media,' 

Beiin reveals how a typical Dinah Moe project 
unfolds, and how the different phases of a project 
affect the finished solution. 'We are often Involved In 
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## The work process is a little different 
depending on the platform .J1 - 


the pilch phase when our client writes their treatment 
In some projects there is already a clear idea for the 
must but more often there is a lot of room for new 
ideas We get access to all available material and write 
a sound treatment that describes how music and 
sound can be used to make the production as good 
as possible. We give references to music and other 
productions to give an idea of the final result. We 
always try to push the boundaries by doing things 
that have not been done before, it could be small or 
large things, just something that makes this particular 
production unique. 

“If the production includes music production, then 
the next step is to make a music draft for approval. We 
don't want to finalise the production until later so that 
we can fine tune everything based on how the 
production evolves. We have music producers in° 
house but also work with external producers and 
choose the best for each project. 

Sometimes the music already exists, either as a 
released track or made for like a TV commercial Then 
we get the material as separate tracks, (stems) so that 


we can prepare the music for adaptive use. If possible 
we prefer to have direct contact with the producer so 
we can get the music delivered exactly the way we 
want. If it is must for a commercial then the music is 
far too short to be useful for a whole interactive 
experience. If we have a direct contact with the 
producer we produce additional material together 
with them, if not then we do it in the same style. 

"Our main project phase starts when the interactive 
application exists in a first working version. Then we 
go through the application and write a document for 
what we need a developer at our client to add to the 
application. The work process is a little different 
depending on the platform, but the basics are the 
same. We send over an Integration package with test 
sounds and get back an application that loads our 
framework and the sounds. We then work parallel to 
the development of the visuals and functions. When 
we update the sound we send files to be added to the 
main project when they make updates we get back a 
new local copy. It is a very smooth process that 
minimizes dependencies on all levels. 


Elements that need sound are things like videos, 
animations, transitions, user interface. Sound design 
for video is done traditionally but we never add any 
sound to the video itself. Instead we keep different 
types of sound - eg ambience, sync sound, voice over 
- separate, like the tracks in a Pro Tools session. We 
than mix the sounds in real-time. This allows us to use 
the sounds to cover transitions between different 
videos or when a video is stopped. If the sound is on 
the video it gets cut off abruptly, but we can make the 
transition exactly as we want, which gives a much 
more linear feeling for the user. Sound design where 
the sounds are going to be controlled Interactively Is a 
science of its own and often consists of lots of small 
files that are mixed, faded or pitched to give the 
impression of a single sound, like a car engine, 

"We implement the sounds by connecting things 
that happen in the application to sound actions. Real¬ 
time sound control, like when a sound should follow 
the speed of a movement, requires a little coding to 
get the connection as physical as possible. 
Implementing music is a lot about how Lhe music 
should transition between different sections, how the 
dynamics should follow what the user does., and 
where the user are in the story. 

“5ince our work most often is done alongside the 
rest of the development there will be quite a lot of fine 
:i nlng o 1 the sounds to :he final ar matlons Testing 
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§ § DinahMoe uses a combination of off- 
the-shelf and bespoke tools § 1 


done at all stages, as is mixing and other types of fine 
tuning. 

Involved in this process from our side are creative^. 
Interaction designers, developers, sound designers 
and music producers." 

As a specialist music and sound production house 
DinahMoe uses a combination of off-the-shelf and 
bespoke tools. Befin gives an insight to the production 
process: 'The music and sound production is done 
with Pro Tools and Logic. 

The Implementation Is done with our own 
framework, which is based around events that tell us 
what is currently happening in the application. Let's 
say that there are two pages in an application,, a main 
page and a sub-page. The developer adds one event 
one line of code (for when you enter the main page) 
and one for the sub-page. We then use these events 
to trigger several actions. Let’s say that the user goes 
from the main page to the sub page and we get the 
'sub_page' event, this is what could happen: 

* Fade out the sound ambience from the main page 

and fade in a new ambience. 

* Change the music from the chorus to the verse 

play a transition sound effect. 

* After five seconds lower the music and add in a 

voice-over. 

"And when the user goes back we get the 'main_ 
page' event we use to return to the previous state. 

The first time a developer works with us they often 
get very confused - they think they are going to start 
and stop sounds as they are used to do. But our way 
of working is so much easier for the developers." 

Audio is an often forgotten element of the design 
and development process. Belin clarifies what music 
and sound has to offer: "Music and sound is all about 
emotions. If you remove the sound track from a 
movie it gets much harder to relate to and much less 
engaging. So music is at least 50 per cent of the 
experience. This is as true for a web experience as it is 
for a motion picture. The internet is still in its infancy 
so 1 expect lots of progress in this aspect in the future. 

Belin goes on to describe how different 
technologies and platforms have a bearing on the 
end result. “We have developed a framework for the 
implementation of music and sound which makes 
most of our work platform agnostic There are of 
course differences in capabilities. If we do a Chrome 
only prefect (and soon Safari too) then we can use the 
Web Audio API which is the best thing that has 
happened to interactive music and sound. The Web 
Audio API is a proposed W3C standard, so hopefully It 
will show up In all other browsers eventually." 


Social media is an integral part of any digital 
campaign. Beling reveals how Twitter has generated a 
five-fold Increase In visitors. 1 think Facebook and 
Twitter are essential parts In the communication. 
Twitter has been by far the best channel to spread 
information about new prefects. For example, Plink 
and TgneCraft has only been marketed with tweets 
from people who have tried them. Plink has had well 
over 300,000 unique visitors since launch without 
any other channel, which has generated a five-fold 
Increase in visitors on our main site." 

Mobile is a key component in the browsing 
experience, but it has very little relevance in DinahMoe 
projects, as Belin explains: “Our approach is platform 
agnostic, so our projects are quite easy to port for 
different devices. Mobile is at the moment a slightly 
higher threshold, but we are working on that." 

Finally, an agency Is no greater than the sum of the 
people who work for it. Belin reveals what DinahMoe 
want from anyone joining the new field of interactive 
music and sound. “In the beginning everybody 
needed to understand all parts of the production 
process which made it very hard to find suitable 
employees. Now, when we are growing this becomes 
less of a problem since all roles get more specialised. 
What we still have some problems finding is people 
with interactive ft<perience of music and sound, 
simply beta use this is a very new field-" 



WEB,,_ ..... 

.www.dinahmoe.com 

POUNDERS _...... 

_Johan Belin 

YEAR FOUNDED .„ 

...2008 

CURRENT EMPLOYEES _ 

8 

LOCATIONS _..._ 

.Stockholm, Sweden 

I SERVICES I 


> Conceptlng 

> Research 

> Music produc lion 

> Sound design 

> Implementation 
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11 The lack of any 
background colour 
to contain page 
elements gives the 
impression of open 
spaces. This stops 
the viewer’s eye 
getting distracted §§ 


Veerle’s Blog 

veerle.duoh.cQm 

platform - -TML CSS. JavaScript 

The fullscreen header boasts a beautiful array of 
colour that immediately adds charm to the page. The 
grey background complement the header almost 
perfectly, and provides the platform for colour delights. 
The two-column layout gives breathing space to help 
ensure a viewer's focus is singular. The homepage is 
finished with subtle shades and a vintage font. 


Lem 

letft.com 

Development platform HTML. CSS r JavaScript 

The vintage paper texLuresets the Lone, and the 
embossed logo only adds an air of completeness. 

The ihree-ediimn layout and left sidebar instantly 
suggest a responsive design, and this is exactly 
what s on offer. The lack of any background colour to 
contain page elements gives the impression of open 
spaces. This stops the viewer's eye getting distracted. 


CSS Karma 

www.csskarma.corn 

Development platform HTML CSS. JavaScript 

The simplicity of tills blog is where its charm lies. A simple 
textured background is accompanied by very few 
graphics, and another basic background image to create 
separation of content. Beyond the aesthetic it is the choice 
of font and. the typography that grabs the user s attention. 
Different weights, sizes and colours create their own 
complementary design. 


36 


blog beautiful 























































cblog beautiful* 

Designer and developer blogs | 


se en^^suggest Tweet a 140 with your blog’s address directly to @WebDesignerMag 

a theme Email your suggestions to A webdesignei@imagme-publisihiiig.co.uk 

web. Here we unveil six beautiful examples that truly typify the art of blog design 













Elliot Jay Stocks 

eliiot iavstocks.com/ bioo 

Development platform Harmony 

The first thing users notice is the total lack of images, 
but the simplicity, colours and subtle background 
texture all make themselves apparent The 
background colour uses delicate shades that offer 
the perfect level of change to reiterate the message. 
The lack of images place the foe us on the ty pe. and 
again, simplicity and subtlety hold the key. 


Owltastic 

owltasticoom 

Development platform WordPress 

The illustrative style and refined colour combinations are 
what give the homepage its ambience and impact an air 
of calm permeates the page. The background texture, 
colour palette, font, typography and three-column layout 
work together to create a relaxed reading experience. The 
use of contrasting images adds anew dimension that 
focuses the readers eye on the main purpose: the content. 


CSS Tricks 

css-tricks.com 

Dr veloptnenl platform ord Pre 

The layout of the site is blog-standard fare but it's the 
arrangement, responsive nature, textures and 
colours that demand respect. The graphical 
dements use an illustrative style and a common 
theme through the backgrounds and textures. The 
font family is used to great effecL to strike the ideal 
balance between weighting and colour. 


blog beauti lull 
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T he past twelve months have taeen a 
vintage time for web typography. The 

web type revolution began in late 20Q9, 
but it Is this past year which has seen a 
maturing of the discipline, All web 
browsers are proudly boasting their typographic 
capabilities as C£S3 continues to both evolve and 
stabilise. We've seen the arrival of some fantastic 
ty pefa ces e ither optimised f or, or s pedficaily desi g ned 
for the screen, and we 7 ve also seen some pretty good 
screens arrive on the market. But most of all, we've 
seen a growing confidence and finesse among web 
designers when it comes to using typography in 
increasingly striking and effective ways. 

As web designers, we do all of our typographic 
work - our typesetting in particular - in CSS. But CSS is 
a layer that can be peeled away. In part or In whole. It’s 
also a layer, not of definitive design directions, but of 
guidelines, hints and nudges. The web designer then, 
must be flexible. Your designs must be able to adapt 
to the environment of the reader, and the reader must 
be allowed to adapt the design to best fit their needs. 

We are now at a point where web browsers are not 
just less broken than they were (although Internet 
Explorer 6 continues to nag and linger like a bad 
summer drain), they are more capable, supporting 
more and more CSS as the specifications grow and 
stabilise with the passing of time. One such 
advancement is the support of media queries, which 
gives designers a sniff of what medium the reader is 
using. In particular we can now know whether the 
reader is using a screen, and what size that screen is. 
Or to put it more accurately, we can send a different 
stylesheet to different sized screens. This is what we 
now know as responsive design. 

For example, the following code snippet can be 
used to send a style sheet to a device with screen no 
bigger than 430px (such as a mobile phone): 


001 <link rels"stylesheet” triedia="screen and 
{max-device-width: 480px) J ' href= J, tnobile.css lt 
type= J 'teKt/cs$ J ' /> 



The Clcarflex She pity theme has a responsive design 
which adapts to the screen size 
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And with that, we are able to provide different 
typesetting guidelines for small devices than for 
widescreen desktop screens {provided the reader's 
software supports media queries, of course), There 
will always be the need for designs to remain flexible 
and adaptive. 

Until very recently, the typesetting 
recommendations that we were able to put into CSS 
were limited to those which might be familiar to a 
metal type compositor working in the Forties: a very 
small pool of typefaces, a modest set of alphanumeric 
characters and punctuation, bold and italic, some line 
spacing, margins and white space. Font sizes on the 
web may be infinite in range and granularity, but 
aside from that, there was little to suggest the web’s 
digital nature. That has all, thankfully, started to 
change - particularly over the past year - and with it 
web designers' Interest and competence in the 
typographic aspects of their work. 

The implementation of web fonts across all major 
browsers was a game changer in many ways. Most of 
all, the ability for a web browser to use a font, not on 
the reader’s machine, but downloaded on demand 
from a web server, provided solutions to many of the 
problems browsers have been struggling with. 

Among those problems is the font'weight issue. 
Browsers have found it nigh on impossible to use any 
weight of a typeface other than regular or bold, 
despite the requirement to do so being specified 
since 1996 in CSS1. For example, to set a semibold 
weight a designer should be able to use fout¬ 
weigh t:60Q and to set an ultralight weigh tone would 
use font-weightlOO. The first difficulty is that fonts 
with extended sets of weights are not widely 
distributed, but even if their installation could be 
more or less guaranteed (on a corporate network for 
example) browsers even now still ignore the CSS rule 
or choose the wrong weight. 

Unless, that is, web fonts are used. With the web 
font @font-face rule, the semi bold and the ultralight 
fonts are made available on a web server and 
explicitly labelled with the correct weights by the web 
designer. A simplified example: 


€01 <3font-face { 

002 font-family: Calluna; 

003 src: u rl (Cal luna-Sem ibold, woff) \ 

004 fon t-weigh t:690; 

005 } 

Ag Ag Ag 


L-R Calluna Sans, regular, semi bald and bold 

The browser problems are even worse when it 
comes to choosing different widths of a typeface, 
such as condensed or expanded styles. In 199 B the 
font-st retc h proper t y was int roduced to CSS to hand le 
this. It took nine values from ultra-condensed to ultra- 


100 Thin 

200 Light 

300 Boot 
400 Regular 
500 Medium 
600 DemiBold 
700 Bold 
900 ExtraBold 
900 Heavy 


The CSS font-weight property takes values of 100 to 900 
as demonstrated by the Brokman super family 

expanded. It’s a sad fact that, 14 years later, it has 
never been successfully implemented. 

Much of the problem lies with identifying which 
font within a family Is designated ultra-condensed 
when it might actually be named super-narrow. And 
that's assuming the font is installed and can be 
identified as part of a font-family {font metadata can 
be very inconsistent). 

So what is a browser to do when it fails to find the 
ultra-condensed style installed on a reader’s 
machine? The answer is that It is supposed to look for 
the extra-condensed style: then the condensed; and 
failing those, it must choose the regular width 
(assuming that itself can be found). Our web designs 
must therefore be able to adapt to these situations. 
Fortunately web fonts come to the rescue again as 
they hugely increase the chances of that ultra- 
condensed font being used. 

This time pragmatism dictates that we completely 
give up on the font’Stretch property and just name 
the condensed font as such: 


001 Sfont-face { 

002 font-family: Proximo Nova Extra 
Condensed; 

003 src: url(ProximaNova-ExCon.woff); 
;004 } _ 

Why pangolins dream of quiche 
Why pangolins dream of 
Why pangolins dre 


From top to bottom: Three forms of Trilogy Saris, 
compressed, regular and expanded 


Something else the early twentieth century hot 
metal compositor wilt be familiar with is ligatures, all 
nicely lined up on his Linotype keyboard. 



The keyboard from a Fifties Li notype machine: notice that 
it includes ligatures 























LAYOUT FUNDAMENTALS 

"Good typography is Invisible, In typography less 
is not always more; but it is usually better" 

“You can make an ordinary font look good, and 
you can certainly make a good font look bad 

TYPE SIZE 

When starting your 
layout, always start 
by setting body size. 

Bigger is better, so 
start with the 

browser detail It Modular Sea fe calculator 
tu SU a lly 16pX). This (modu la rsea le .com J 

may look too big. but remember we read screens 
at arm s length, so relatively the text will be about 
the same size as this magazine, which you will be 
holding closer than your monitor. 

Try out size scales for the contrast you'll need. 
Page hierarchies must be obvious, but don’t 
always have to be achieved with scale - weight 
and colour can work equally wed. Tim Brown's 
modular scale calculator can help here. 

LINE LENGTH 

The optimum width for reading has traditionally 
been 45-75 characters. This is still true for the web r 
and works out at about 223Bems G60 - 600px 
for 16px text), Ensure that your body text line 
length falls into this range. Because It is a range 
you can set your width as a percentage of window 
size to give more flexibility and allow for a 
responsive design approach. 

LINE HEIGHT 

Line height has a relationship with both measure 
and type size. The longer the line or the smaller 
the text, the more line spacing is required, There's 
no hard and fast rule, bur body text will need a line 
height of at least 1,3em. 


001 body {line-height: 1, Sem} 
002 hi {line-height:1.lem) 


Many people say to 
use unitless line 
height. This is wrong 
tor at least lazy), as 
bigger text needs a 
smaller line height 
relative to the text 
size. Using EM£ as a 
unit of line-height (as in the above example) forces 
you to reset the line height for all elements with 
large text - this is definitely a good thing. 


Ligatures help legibility and readability by 
replacing clashing pairs of letters with a specially 
designed character. Typically the terminal of an T 
may clash with the dot of an T, so a ligature is used to 
prevent this. It has theoretically been possible to 
insert ligatures into words on web pages for years, 
but they have never seen the light of day - mostly 
because the widely distributed fonts on which we had 
to rely do not include (or need) them. That has 
changed now as web browsers finally take on 
technology introduced with Eighties desktop 
publishing. Welcome automatic ligature insertion. 


fi-fi 


The Microsoft ClearType font Gandara includes an fi 
ligature, as shewn above 

The first fonts containing ligatures to be globally 
distributed were Microsoft's QearType fonts. 
Ironically, Microsoft's current browser is not yet 
capable of automatic ligature insertion, but that's 
Inte met E xplore r for you . H owever, Fi refox, Saf a ri and 
Chrome are {as will Internet Explorer 10), 

So-called 'common' ligatures are shown by default 
at all text sizes by Firefox running on Mac OS X, and 
from 20px upwards by Firefox on Windows. These 
vary by font, but usually include fi, fl, ffl and ffi. For 
Safari and Chrome, ligatures are off by default for 
performance reasons - this is especially pertinent to 
WebKit browsers running on less powerful devices 
like smartphones and some tablets, For text set at 
large sizes, where the lack of ligatures (and hence 
letter clashes) is more noticeable, you can turn 
ligatures on by using this rule: 


001 hi { 

002 text-rendering: optimizeLegibillty; 
003 } 


Technically speaking, text-rendering is an SVG 
property that is not defined in any CSS standard. 
However, Gecko and WebKit browsers let you apply 
this property to HTML. 

Automatic ligature insertion is achieved through a 
font technology called OpenType, something that is 
very definitely inherently digital. Coincidentally, 
OpenType was introduced in 1996, the same year that 
CSS became a standard, however it took until CSS3 
for OpenType features, including ligatures and many 
others, to be ava i la ble to us for use on the web. 

Most OpenType features can be controlled through 
the font-feature-settings property, which is currently 
supported by Firefox, Chrome/Win and Internet 
Explorer 10. The syntax is a bit unfriendly as it maps 
closely to the OpenType specification. Other easier- 
to-understand properties have been specified in 
CSS3, but these have not yet been implemented in 
current browsers. 


This is how you can activate ligatures using font- 
feature-settings 


001 -moz-font-feature-settings: 'liga=l”; 
002 -ms-font-feature-set tings: "liga" 1; 

003 -u^bkit-font-feature-settings: "liga 1 ' 1; 
004 font-feature-settings: ”liga" 1; 


Note the subtle difference between the older 
Gecko syntax {for Firefox) and the other browsers 
which are the newer 'standard' syntax. Note that if 
you want to turn common ligatures off, you can 
replace the 1 with a Q. 

You may have come across other ligatures, such as 
the looped st’ combination. These less common 
substitutions are called discretionary ligatures and 
should be used - as the name suggests - with 
discretion (just in headings for example). You can turn 
on discretionary ligatures in addition to common 
ligatures as follows: 


001 -moz-font-feature-settings: '1iga=l, 
dl ig=V; 

002 font-feature-settings: J Tiga ir 1, r, dl ig"“ 1; 


(We’ve removed the other vendor prefixes for the 
sake of brevity). 


St - 


Discretionary I igaturcs are i nc I u ded in Ca 11 una 

Specifying discretionary ligatures is definitely a case 
of progressive enhancement. It won't matter too 
much If users of less capable browsers don't get to 
see the discretionary ligatures, but modem browsers 
will be treated to a visual delight. On that note, 
another kind of variant available in some fonts is the 
swash alternative, where a more decorative character 
can be used to replace an ordinary one, often at the 
end of a word. For example: 


Spiekermann > 


The swash a He mates I ii Trilogy Fatface 


001 <p>SpiekermanCspan class= ,f 5W5h">n</span>c/ 
002 .swsh { 

003 -moz-font-feature-set tings: "swsh=T'; 

004 font-feature-settings: ''swsh" 1; 

005 } _ 
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Smaller text needs more line 
height than larger type 

















HOW TO CHOOSE THE RIGHT FONT FOR THE JOS 

Picking which forts to use In your design can bean art 
that takes many years to master. There are thousands 
of web fonts available now, and it takes time to bulk) 
up a pe rso nal I i bra ry of fonts you know well, B ut the re 
is some science to it as well. 

There are always some objective requirements for 
text. Deriving these can help you whittle down your 
shortlist of fonts. Ask yourself what the text will be 
used for; precisely how and where It will be used, and 
under what con d I lions? 

CHARACTER SET 

Firstly consider what character set will be required. 
Which countries' languages need to be supported? 
Some languages such as Slovenian require accents 
not always found in fonts (such as the diacritics In 
slovenscina) so make sure your fonts have the right 
charactersfor the job. If necessary try pasting accents 
into the type testers available on all good web font 
service websites, 

SIZE SUITABILITY 

Are you picking a font specifically for use at 
particularly large or small sizes - for example 
headings or captions? Consider (and test) whether 
the font sits nicely at those sizes. Will you have 
particular space constraints? Perhaps you will need to 
fit eye-catchl ng text i nio a ca rouse I, i n wh I ch case you 
might took towards a font family with regular and 
condensed styles of the same typeface. 


The Pangolin 

A pangolin or 5«ly anteater a mammal of th e order 
PtwLidota. Pangolins have large keratin scales covering 
their skin and are the only mammals with this adaptation. 

Taken from W fclpMla 


PT Sans is available to narrow and caption styles for large 
and small text respectively 

MULTIPLE WEIGHTS AND ITALICS 

It may be useful to look atsuperfamilles that contain 
fonts at many different weights. If you need to 
distinguish between many different heading levels, 
superfamilies can give you a certain amount of 
flexibility, and ensure consistency across different 
type sizes and treatments, 

HINTING 

If a significant proportion of the reading audience will 
be using versions of Internet Explorer older than 9, 
you may want your fonts to have been manually 
hinted. This process helps Windows take the vectors 
in font files and turn them into readable pixels on a 
screen. Smartphones and Macs use a different 
process which doesn’t require hinting. 



Hinting Sir I Cere In FontLab 


Display of text on-screens, primarily Windows, 
can be improved with hints. Vectors (outlines) are 
rasterised to fit to pixels maki ng up a screen hints 
tweak which pixels are used to help stop lines 
breaking, or counters dosing. Hints are done per 
letter, per size, Auto-hinting can be good but 
manual or hand-hinting will almost always be 
better, but It is time-consuming and requires 
considerable technical skills. It's worth noting that 
hinting changes the shape of the letterforms. Mac 
OS X and the vast majority of smartphones 
(including 03. Android and Windows Phone 7) and 
tablets ignore hinting, favouring instead to go for 
shape accuracy and compromise with a softer 
(some might say blurry) rendering. 


OPENTYPEFEATURES 

Consider whether you intend to make use of 
OpenType features. Check the font has the options 
you need, such as ligatures, small caps, old-style or 
tabular lining numerals, and so on. 

SUITABILITY FOR PROLONGED READING 

There are common features of a font's design which 
can indicate that a font might be good for body text - 
the main text of web page - particularly when that 
font will be used on a screen. 

Screens are pretty crude at rendering text. Ever 
the very best have resolutions a fraction of that 
which can be found on the cheapest LaserJet. 
Good screen fonts are designed with this in mind 


CONTRAST 

Contrast in a font's design can make for an easier 
reading experience, but too much contrast and the 
font wil I st r uggie to re nde r we 11 at small sizes. Too low 
and reading becomes tiring. 


contrast 

contrast 


WEB FONT SERVICES 



■ Fontdeck (fontdeck.com) The most popular 
independent service with exclusive typefaces 


THE EASIEST WAT TO USE 


Real Fonts 

ON YOUR WEBSITE 


- Type kit (typekitcom) Now owned by Adobe 



• Weblype (webtype.com) By the Font Bureau 
foundry, a modest collection of excellent fonts 



- Web INK ( webink.com ) Made by Extensis, the 
people behind Suitcase Fusion 



) The first 

found ry^mn service ■ very well optimised 



■ Google Web Fonts (google.com/webfants) All 

free typefaces of varyi ng q ua I fty 



■ Fonls.com (webfonts.font5.com) From the font 
behemoth that is Monotype 


IL-Ffc High contrast ESodoni, Low contrast Futura 























lijrn COM P/ll I CDV Ten sites featuring great typography using web fonts 

UULD rlllll uALLtni fromtheTeraolthe Best list 
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1 Do Lectures (dolectures.com) uses Rooney 
Web and Proxima Nova 


bcubque buying agency 
Every client is assurod the 
persona] services of one of 



6 Penny Black ( pennv blackgroup.com) uses 
Serifa 


OPTICAL SIZES 

Some typefaces Include fonts designed for use at 
large sizes (usually suffixed 'Display’) and fonts for 
use at small sizes (often suffixed 'Text’). A display font 
wi 11 ty pi ca lly have a h ig he r contrast tha n the text fa ce, 
and can also be slightly more compressed and more 
tightly spaced. 

Occasionally the fonts can be very different, as 
with AbrfL Abril Display is based the classic high 
contrast forms of a Didone, whereas Abril Text is 
more akin to an old-style slab serif. Vet the two work 
together beautifully when set at appropriate sizes. 




Cusman Gcusman.com) uses Cargo and Museo 


Uft Vi fiMAJt 
mafiCAJiON 


2 Genevieve Tab i os (lmgenevieve.com) uses 
Ingeborg and DRW Egyptienne Narrow 




7 Sales Reinforced ( salesreinforcedxom) uses 
Depot Web Condensed 


3 Avios (avros.com) use F5 Joey 


4 Aston Martin (astonmartin.com) uses Classico 9 Waterleaf Architecture (water!eaf.com) uses 


URWGrotesk 


The Pangolin The Pangolin 



The Pangolin The Pangolin 



The Pangolin The Pangolin 



From top to bottom: Din Display and Dm Text Abril 
Display and Abril Text, Siri and Siri Core, In all cases 
Hie Text style is clumsy when set large, and Display is 
too thin when set small 


X-HEIGHT 

X-height, perhaps more than any other facet, makes a 
difference to screen legibility. X-height refers to the 
ratio of the x to the ascenders (of letters like f and I). 
Generally a taller x-height works better on screen as It 
makes the font seem bigger. A lower x-height can still 
work depending on design of font, but a bigger 
x-height leaves more room for three-storey letters, 
particularly a and s. 

APERTURES 

An aperture refers to an opening into a letterform, 
such as in the letters a,c, e and s, A typeface with open 
apertures will make the text more readable. 



i nifrnei coenes te nsabi t Ji 


5 Brent Riddell (brentriddell.co 


Helvetica has closed apertures, whereas (L-R) Arlal, LFT 
Etica, Raldo and Runda have open apertures 


42 ___SsaLure 
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SHAPES 

Matthew Carter (designer of Georgia) is often quoted 
as saying 'Type is a beautiful group of letters, not a 
group of beautiful letters", but of course the actual 
shapes of the glyphs do make a huge difference. 
Inherently simple shapes like those in geometric sans 
serifs, and the industrial crudeness of slab serifs, work 
well on screens, To aid readability and 
understandability, you should also consider whether 
a typeface design differentiates between i. 1 and I, as 
well as 3 and 8, and O and O. 


in in 


FS Me has good character differentiation whereas 
Helvetica doesn 't 

So when choosing a font for body text, look for 
typefaces with low contrast, display and text variants, 
a tall x-hefght, open apertures, simple and 
differentiated shapes, 

OVERALL STYLE 

Like all good design, font choice comes down to 
knowing your client and their audience Some people 
prefer curvy swashes, some grungy scripts, and 
some go for bold a nd si rn pie, Fo r body text you 11 have 
to reel in the curves and smooth out the grunge, but 
there will always be something suitable. 

Spend time browsing the web font service 
websites. Go through their showcases and galleries 
to see the fonts in action. Use the favouring 
functionality on Fontdeck and Typekit to build up a 
long-list of options, Read the font descriptions - type 
designers often have a particular use In mind when 
they designed the font. 



Fo ntdcck's s howca se 


Also install the WhatFont bookmark let. It's a great 
tool for finding out which fonts are being used on a 
website (and quite handy for debugging tool 



Above all make sure the typeface doesn’t 
communicate something you do not want to 
communicate, (Does a font from the Seventies really 
say what you want It to?) Remember there Is no such 
thing as a neutral typeface - a typeface transmits 
neutrality and that's a message in itself. 

Consider adjectives in the list below: pick the ones 
which suit your client (consider involving your client 
In this exercise). Then assess your long list of fonts 
accordingly. You can also use them as search terms 
on font sites, and when browsing by tag. 


angular 

fancy 

powerful 

approachable 

fashionable 

practical 

architectural 

feminine 

resistant 

blue collar 

formal 

sensible 

boxy 

friendly 

sexy 

carved 

futuristic 

simple 

charming 

geometric 

slim 

classic 

humanist 

soft 

clean 

industrial 

sophisticated 

comfortable 

lively 

strong 

commercial 

machined 

sturdy 

contemporary 

masculine 

technical 

cool 

modern 

traditional 

corporate 

official 

trustworthy 

delicate 

plain 

universal 

elegant 

posh 

young 


PAIRING FONTS 

When it comes to pairing fonts, its good to remember 
that opposites attract. If your fonts are too similar to 
each other, it seldom works, Consider pairing a flashy, 
extroverted font (display face) with an understated, 
introverted font (text face). 

If you are considering using more than one 
typeface, ask yourself why. Lots of typefaces can be 
like tots of voices - too many and you have a 
cacophony - all shouting against each other. Can the 
contrast be achieved with different weights and sizes 
of the same font? Perhaps you feel really large 
headings are required, in which case a more 
condensed font will be required. Maybe you want 
image captions to be small and unobtrusive, in which 
case a simple sans serif may be the way to go, 

TEST, TEST AND TEST AGAIN 

For body text in particular, create a specimen page 
where you can compare different fonts side*by-side 
and see how they work together, Fontdeck has 
created a tool which automatically creates this based 
on your font preferences (see bltJWJIBJVP) 



Serif an d sans automatic type testers created by Fontdeck 


A BRIGHT FUTURE 

Higher resolution reading environments and rapidly 
improving software mean that small typographic 
details in web design will count more as technology 
marches on, It means web designers can, and should, 
offer different and more detailed typesetting 
recommendations in stylesheets. The future Is a 
bright one for typography on the web. 

TEN OF THE BEST 

SERIF: 

1 Abril Text (Fontdeck, Typekit & WebINK) 

2 Adelle (Fontdeck. Typekit & WebINK) 

3 Adrians Text (Fontdeck) 

4 Boon i Text (Typotheque) 

5 Freight Tex t (Typekit) 

6 Ingeborg (Fontdeck) 

1 Magnets (Fontdeck) 

8 Pre m tera (Fontdec k) 

9 Reg i me (Fontdeck) 

10 Rooney Web (Typeki t, Webl N K) 


SANS: 

1 Akagi (Fontdeck) 

2 Ben ton Sa ns (We bTy pe) 

3 Depot New Web (Fontdeck, Typekit, WebINK) 

4 Frank (Fontdeck) 

5 FS Me (Fontdeck) 

6 LFT Etica (Fontdeck, Typekit, WebINK) 

7 Open Sans (Gooqle Web Fonts) 

8 Run d a (Fontdeck, Type kit) 

9 Siri Core (Fontdeck) 

10 URWGrotesk (Fontdeck). 


DISPLAY: 

1 Apercu (Fontdeck) 

2 Adso (Fontdeck) 

3 Classico (Fontdeck) 

4 Trilogy Fatface (Fontdeck) 

5 Strangelove Next (Fontdec k) 

6 Cabernet (Fo ntdeck) 

7 Serif a (Fontdeck) 

8 Iniuk (Fontdeck) 

9 Cargo ( Fontdeck.WeblNK) 

10 FS Joey (Fontdeck) 
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Decouple 
source order 
and design 
with FlexBox 

Entirely decoupling source order from 
style has always been a challenge but 
CSS3 FlexBox solves the problem 

tools IHTML5. CS53. dabblet.com 
Expert Ben Fra in 




dabblot 


CSS y RhuK HTML . 


Flexbox:the future? 

13 Facebook GJ Twitter BDUnkedln O YouTube !$ Google 


(ritrcTiod tri 111 Inc^didtinl trt tniM itt ct do lire nrnqn n. n 1 n"jun, Ut ortim 

fltfnttfjirrr wnforn,-qyis nostnutf Rraffim ullflmwiirtwrte rfrf til 
olfqtifa ex co conrmoda coriMqtrat Dms cuto inra doicrrin 
reprehefideii' in voiyptate yeft esee.cillym dafom ay fu-gifal rMJfta 
pfljfMun Brocpteur tint oecacoat cupfAflatnon pnotdent cunt in cu r pa 
qui offida doEanmt meiflif an*m kJ oat [ptrarurT?.. 


Wob PtlrBW: Visa I ul fVJrw - MbdUffHCHOmuk 



Understand browser support 

Head over to caniuse.com and type 'FlexBox' in the 
search field to see the current level of browser support. At 
present Google's Chrome is the only browser even partially 
supporting the new version off the specification (we're using 
v19 here). Other browsers shewing partial support are 
typically using the deprecated version. To continue along, get 
vi9 onwards of Chrome, or the latest development or 
experimental version. 


hen developing a website, 
we’ve all encountered 
occasions when the 
design can only 
realistically be achieved, 
code-wise, by opting ffor 
an unfavourable source 
order. Typically, we want 
the source code to favour 
the main content before 
tangentially related content like sidebars. 

However, practically, it isn't always possible and we 
find ourselves selling our souls to the PSD we work 
from, to attain what the visual design requires. 

Thankfully, as this is such a common problem, there's 
a CSS module being worked on that should alleviate our 
troubles moving forward. The CSS Flexible Box Layout 
aims to make a number off CSS-based layouts far 
simpler. It isn't the first time that FlexBox has made an 
appearance. You may have heard or read about it 
before, but it's had a significant overhaul of late, and as 
such, it's time to get reacquainted. 


The Flexible Box 
Layout aims to make 
layouts simpler 



02 Get Chrome Canary 

The latest iteration of FlexBox isn't supported in 
most browsers (yet). When test driving new CSS 
features, if sometimes helps to have Google’s Chrome 
Canary. It's an experimental release of the Chrome 
browser that has the latest features baked in for us to 
play with. You can get it hem too [5,gooale .corn/ 
dlpaqe/diroitiesxs a nd it will play happily alongside an 
existing version of Chrome. 
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Checkthespec 

Because the latest FlexBox specification is being 
actively worked on, it’s worth checking what's changed. 
Here, we are using the version dated 22 March 2012 
(www.w3.org/TR/css3TlexBox) . It's worth knowing that 


Existing layout modes 

The existing CSS2.1 specification provides four 
layout modes: block, inline, table and posjtion. WeVe 
used these over the years In addition to wrestle layouts 
to our will. Despite our best efforts, however, there are 


Enter the FlexBox 

FlexBox (and Inline-flexbox) is effectively 
intended to be a fifth layout mode. The contents oJ a 
FlexBox can be laid out from left right, top or bottom 
and the display order can be entirely independent from 


a future indication of possible changes would be in the 
latest Editor's Draft Cdev.w3.org/csswg/css3-flexboxI 



times when the existing layout modes just don't suffice, 

001 .block { 

002 display: block; 

003 } 

004 .inline C 

005 display: inline; 

006 } 

007 .table { 

008 .display: table; 

009 } 

010 . .position { 

011 positionr relative; 

012 } 


the source order. Furthermore, FlexBoxes. as their 
names imply, can flex to the available space. 

001 . FlexBox { 

002 display: FlexBox; 

003 } 

004 ..inline-FlexBox { 

005 idisplay: itiline-FlexBox; 

006 > 


Tweaking for 
viewports 

01 _Set a media 



Our first FlexBox 

Let's start with am example, 
similar to the one in the W3C spec: a list 
of navigation items that will span across 
the viewport. The markup is a standard 
unordered list and five list iterns. We’ve 
just used an icon font to make things 
more visual. You can view tie example 
online at: dabblet.com/gist/2793459 


Widths are respected 

it's still possible to alter the width 
on flex-items within a FlexBox. Here 
we've set the third item so that it has a 



Make it span 

The flex-wrap property makes it 
simple to ensure items span multiple lines. 
Let's suppose we want to make two 
columns from these list items, To do 
that using FlexBox we can set the list 
items to 50% width and add flex-wrap; 
wrap; to the unordered list. Here's that 
example online: dabblet.com/ 


Test drive 
with dabblet 

Want to quickly try out 
new browser and 
specification features? 
Use dabblet.com. It 
allows markup and CSS 
to be entered, displayed 
visually and saved as 
github.com gists'. 


Understanding 

flex-direction _ 

FlexBox makes it simple to alter the direction of 

elements with the flex-direction properly. This can accept the following 


query range 

If we want to adjust the effective source 
order for a page using FlexBox. first it's 
necessary to make a media query. In this 
instance well opt for one based on 
viewport width. 


001 ©media screen and (max-width: 
9l9px) 

002 { 

003 */ styles go here */ 

004 } 

02_Re-order the 

FlexBox items 

Now. using the flex-order property, adjust 
the value to the desired source order at 
each specific breakpoint. To prevent 
anomalies, ensure that each element 
within a FlexBox is set a (lex-order. 

001 ©media screen and (max-width: 
910px) ( 

002 footer { 

003 flex-order; ; 

004 } 

005 } 


width of 100%. so the first and last two 
list items take up 50% and the third takes 
100%, placing it in the middle of 
everything. Note that float and dear have 
no effect when using a FlexBox. 



values: row. row-reverse, column and column-reverse. 

With our same markup structure it’s therefore simple to make our 
list vertical by using flex-direction; column:, The reverse options stack 
items m the opposite order. Have a play: dabb I et.com/g I st/2793598 


n Facebook 
B Twitter 
m LinkedIn 
O YouTube 
Google 


03 _Tweak to suit 

Obviously there will be other properties 
to tweak at different viewports to keep the 
design working, besides just the sort order. 
Typically, font sizing, margins, padding 
and width will need attention. 

001 ©media screen and (max-width: 

910px) { 

002 header { 

003 flex-order: 5; 

004 fontsize:0.7em; 

005 margin-top;20px; 

006 } 

007 > 
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Flex-flow property 

We've looted at flex-direction and flex-wrap - but 
these two properties can be combined using flex-flow. 
So as an example, let’s say we wanted our list stems to 
span multiple wrapping rows, backwards. We can just 
use flex-flow; row wrap-reverse. You don't have to 
declare both the flex-direction and flex-wrap, either will 
work alone, eg flex-flow: column;. 




Get to grips with the 
FlexBox box model 


The FlexBox layout model Is 
described in the specification as being 
agnostic; It doesn't care about the way 
we traditionally lay blocks out (block 
for vertical, inline-block for 
horizontal) so It’s Important to 
understand the terminology. The 
main-axis refers to the direction the 
child elements will go in. By default, 
on a normal left to right page this will 
be left to right, The main-size refers to 
the length of that axis, the main-axis 
begins at the main-start and ends with 
the main-end, Opposing the main-axis 
is the cross-axis, which works with the 
same conventions in the opposite 
direction. Typically this Is useful to 
know when using the flex-direction 
property where row (and row-reverse) 
are used to lay things out horizontally 
as a row, and column (and column- 
reverse) aroused to lay things out 
vertically as a column. 


Understanding flex-order 

The flex-order property allows us to change the 
order in which things are displayed. Consider first the 
order of our markup: Facebook, Twitter. Linkedln. 
YouTube and then Google. By using flex-order! 
flex-order 2. etc. on each of the list items we can alter 
their position at will, regardless of the source order, 



Flex property in flux 

There are currently some discrepancies between 
the editor's draft and working draft of the Flex property, 
and neither works consistently in Chrome or Chrome 
Canary at the time of writing. Theoretically, the Flex 
property should be used to seta ratio along with a 
preferred length so that elements can grow or shrink 
relative to other elements. One for the future! 



The flex-pack property 

The fl ex-pack property accepts one of five 
values: start, end. center, justify and distribute. We can 
use these like a text-align to control how elements are 
'packed' within their FlexBox container. While justify and 
distribute initially appear similar, note that justify butts 
the end items to the end of the container. 


Atm— if'- ** 


Ffexbox:the future? 

Cl facaboofc D'-t-jw HI a ' fcTuo# SSoagw 




No floating 

With FlexBox. floats are unnecessary. To control 
a typical layout, it’s possible to do it with width and 
flex-order. Create a document (or dabblet) with a 
header, navigation, main content dfv. sidebar (aside) and 
footer. Set display to flex-box and flex-flow to row wrap, 
and then set widths for the elements, They float to 
where you would expect but without a float declaration. 


Background 
gradients 
with CSS3 


Add a little background 


magic courtesy of CSS3. 
Just copy and paste a 
pattern of your choice: lea. 
verou.me/css3Datterns. 


Aligning elements 

There will have been plenty of 
occasions when aligning content within a 
containing element meant resorting to 
awful hacks and some choice expletives. 
Despite the seemingly alien terminology, 
cross-axis alignment allows this to be 
achieved. Choose an element within the 
flex-box and add flex-ltem-allgn: end;. 
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Further align merit 

It's possible to align individual FlexBox items with start end. center, stretch and 
baseline. It may seem the effect is the same as text-alignment and vertical-alignment, 
but remember that as a FlexBox can go in any direction, the alignment property is 
quite powerful. Stretch can be used to make an element fill its entire container. No 
more faux columns! 




Viewport 

specific 

Armed with our FlexBox 
knowledge, we now have 
the means to alter the 
entire layout and order 
that elements appear on a 
page. For example, using 
these alongside media 
queries means anything 
can appear anywhere at 
whatever visual breakpoint 
we need. Perhaps moving 
the content above the 
navigation and header for 
thinner viewports? 


A cautionary tale 

The sad fact is that on a 
non-supporting browser. FlexBox 
fails miserably. Fire up your 
FlexBox-based CSS layout in such 
a browser and weep, if you'd like 
to use it now. it would be possible 
to fork the CSS code using 
Modernizr and supply one 
FlexBox style layout with a 
.no-FlexBox prefix and a 
FlexBox-o denied one without. 



For specific applications 

if you're primarily developing for a specific platform, and it 
supports one of the prior versions off the FlexBox speafication. there's 
nothing to stop you using it, Prior versions were quite different and 
used differing terminology but enjoyed similar functionality There are 
also more resources showcasing its ability, including one from 
Microsoft: bit.ly/hMr3zt. 



20 The future 

Once support for 
FlexBox settles, we'll have 
a simple. CSS-based 
method of easily 
changing the source 
order (visually) of a page's 
elements. It will also make 
many typical CSS layouts 
far simpler to achieve 
{without workarounds and 
hacks) and negate our 
current reliance on float 
properties in those 
serious times of need. 
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Responsive HTJTUL5 forms 



First Name 


John 


Spencer 


2 xample.com # 


2012 - 05-21 


How many team members will you share with? 


& I have read and agree to the terms and conditions 




CSS 3 
s/¥scits 


Create stylish, 
responsive 
HTMLS forms 
without JS 

Our reliance on JavaScript will 
decrease as HTMLS is embraced 

tools I tech I trends JavaScript HTMLS, text editor 
expert Sam Hampton‘Smith 



avaScript has helped turn the web 
from a static experience into a rich 
interactive tool that provides handy 
feedback with almost tactile qualities. 

As a universally adopted standard, it's a 
great way to ensure your visitors benefit 
from the best possible experience, 
whether you're creating animated 
slideshows or complex web apps. 

When it comes to forms JavaScript is 
most commonly used to provide feedback to the user 
while they enter data, or to create user-friendly controls 
that ensure valid data is input. This is all well and good, 
but there tends to be a lot of code required just to 
provide some basic validation or input masking. 

HTMLS seeks to address this problem by introducing 
new form input types that allow us to pass the basic 
validation, and input widgets over to the browser 
without relying on external scripts. In this tutorial we're 
going to use these new inputs to create a responsive 
design that provides user cues and feedback, along 
with simple validation, to reduce the need for JavaScript. 


48 


tuirrols 

















<tutoiinls> 


Create stylish, responsive HTML5 f orms without JS | 



Basic HTML 

As ever, we need to start by creating a basic 
HTTMl page. We're using a fully HTML 5-corn pliant 
document here, and we've put in place <header>, 
<articie> and <footer> sections inside our body tag 
ready for content Set up a link to an external stylesheet 
in the head section, and put an ch1> heading inside the 
header section ready for styling. 



Form fields 

Our input fields are ail set to type= text", with the 
exception off the checkbox and submit button. Up until 
HTML5, if you wanted users to submit text you only iiad 
the choice of text or textarea as input types, but we're 
going to use a new type for the email field - 
type="email* Put that in place and notice that nothing 
appears to change upon loading your page. 



Input validation 

You'll notice that if you apply the required 
marker to the text elements for the First Name and Last 
Name fields, they become valid as soon as you enter 
some text. The Email address field only becomes valid 
once you've entered a properly formatted email 
address. However this is your web browser applying 
validation for you - automatically! 



Basic CSS 

Create your stylesheet document and assign 
some basic styles for the page. We've used a repeating 
textured background, a little ribbon graphic that repeats 
for the header and footer sections, and we've also 
installed a Google Web Font to make our heading look 
a bit fancier We used Kuler f kuler.adobe.com} to create 
the colour palette for our page design. 



The required marker 

We can let the web browser know that a field is 
required by adding the required attribute to the <imput> 
tag. Put this In place for any fields that are necessary for 
your application CweVe added a required marker to the 
name and email fields], Now that we've got the required 
marker, we can use some new CSS pseudo classes to 
apply dynamic styling to these elements. 



g8 Placeholder text 

it's good from a usability point of view to give 
the person compiling the form some cues to help 
therm see what kind of information you’re looking for. 
The placeholder attribute allows you to show this easily 
and placeholder text is automatically styled to show 
that it's a hint rather than actual data. Add 
placeholder="your hint" attributes to each of your fields. 



Theform 

Create a form inside the <article> element. This 
needs to consist of the opening grid dosing form tags, 
as well as a series of form fields and labels. We've 
created five different input fields for data, plus a 
checkbox and a submit button. Each element has a 
corresponding <label> associated with it. Add some CSS 
styles to suit your design. 



New CSS pseudo classes 

New to CSS with the advent of IHTML5 is the 
ability to target invalid and valid form fields. These 
pseudo classes are active depending upon the state of 
a form field - if it meets the required stipulations, fields 
will be 'valid', if not - 'invalid'. Add some code to your 
stylesheet to apply different backgrounds to inpuLvalid 
and input invalid 



Other field types 

We're not limited totype= H email H tor form fields. 
Let's make the date field work for us using the new 
HTML5 type-'date" field. Again this renders like a 
normal text field, but depending upon the browser you 
use you'll see a browser control for selecting different 
dates, In Safari we get an up/down arrow that allows us 
to scroll through dates. 
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As web designers weVe got to deal 
with how out page should react on 
older, as well as the most recent, 
software. This has become easier In 
recent years with JavaScript solutions 
that target more antiquated browsers. 

Modemlzr Is a popular solution, as 
It allows you to Identify 1 eatutes 
supported rather than specific 
browsers. So, you can target individual 
features ol HTML and CSS, and 
provide a fallback based on the 
browser’s ability to render them. 

Thls means you can experiment 
with new HTML5 and CSS3 features 
without worrying about your page 
breaking, or rendering badly 

You can add Modemlzr to your 
pageby linking to the script from the 
<head> section. Download from 
modeittlzr.com. include it and go! 

Modernizes site enables you to 
configure the script to your needs, so 
you can build a custom version that 
only checks for features you're using. 

Once the script has run, a series of 
classes wtl I be applied to the body 
element of your page. Each class refers 
to a feature and is added either with 
the feature name - eg canvas - or 
prefixed with no- If the feature isn't 
supported - eg no-canvas. This allows 
you to add simple CSS styling to deal 
with browsers that don't support 
specific features using the syntax: 

001 #element { /* styles for 
browsers that support the 
feature */ } 

m2 

003 .no-canvas #element { /* 
styles for browsers that don't 
support the feature */ } 

As the script simply adds CSS classes, 
you can use the power of scripting 
libraries such as JQuery to easily target 
and respond to non-compllant 
browsers with the same syntax. 



Your number’s up 

Similarly we can set the team members field to 
type=numbe r ", This restricts entry to a digit only, and 
the browser will add user controls to help page 
between numbers automatically. Each of these field 
types is making it easier for us to control the data that's 
entered into the form, and remember that each one is 
being automatically validated for us, 



More styling 

Add further cues to the form to help the user, 
such as input.focus to highlight the currently selected 
field. You can also use the inputttype=datel syntax to 
selectively style the individual input types. This is useful 
for removing styles as well as adding them. Use this 
syntax to target the submit button with 
inputltype-submit] {...} 



Set a range 

On the number field we want to prevent silly 
answers such as -1, To set a range of acceptable values 
we can use the min and max attributes on our <input> 
field. Add min='O r and max='10" to your tag and reload 
the page to see the effect this has: we can no longer 
enter a value of 11 or -1 into the field. 



CSS animations 

Add a final flourish by creating a CSS animation 
for the scale of the submit button when the user moves 
their mouse over the top of the button. This helps make 
the button feel more active to the user, and adds a little 
panache to our final design to boot. Test in your 
browser, and don't forget to use vendor prefixes to 
target each browser as required. 


Next steps 

As HTML5 isn't yet 
universally supported, 
you'll still need to target 
those pesky older 
browsers and provide 
fallback validation using 
JavaScript. Luckily older 
browsers will ignore 
type- n date". type='emair 
and so on. rendering 
these fields as regular text 
input fields. Use the 
Modernizr script 
(itiodernlzrxom) to 
identify and target 
non-compliant browsers. 
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Create native 
mobile apps 
with CS6 
PhoneGap 

Dreamweaver CS6 and the integration 
of PhoneGap Build make it easy 

tools I tecli I trends Dreamweaver CS6. Photoshop 
expert Mark Shufflebottom 



hone Gap has become a 
well-used tool In allowing web 
designers and developers to 
quickly translate their skills over 
toapp design. PhoneGap was 
recently acquired by Adobe and 
has been renamed as Apache 
Cordova, but at present their 
doud-based service. PhoneGap 
Build, still retains the name. With 
the new release of Dreamweaver C36, Adobe has been 
quick to leverage the power of the PhoneGap Build 
service into the software. In case you are not familiar 
with PhoneGap Build, it is an online service that allows 
you to upload an entire HTML5 app as a ZIP file and it 
will, in return, build apps for Android. Blackberry. webOS, 
Symbian, and if you have a provisioning profile. iOS as 
weH. What's great about this service is that you don’t 
have to install any of those SDK's on your computer and 
you get to build mobile apps that take advantage of the 
native phone's functionality. In this tutorial we are going 
to show you how to work with the phone's camera. 
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Get Dreamweaver 

To start you'll need the latest version of 
Dreamweaver CSG. A demo can be downloaded from 

www. ad obe.com/uk/produ cts/d rea mweave r. ht ml. In 

the pane) on the right-hand side of the screen click Try 
and then follow the instructions to download. Once 
downloaded, install the software and launch it. 



Define a site 

On your desktop or somewhere easy to find, 
create a new folder and name it 'mobile'. In 
Dreamweaver, go to S1be>Manage Sites and in the 
pop-up window click, the New Site button. Name the site 
'tamtake' and browse for the mobile folder that we just 
created. That's the site defined, so click Save, then Done. 



Create the page 

To start the project we need to create a new 
page, Go to File>New and in the dialogue to click Page 
from Sample, Mobile Starters and jQuery Mobile (Local). 
This will create a basic jQuery Mobile app that will be 
the start of our project so dick the Create button to 
apply this template. 



Get the view 

Save the page as 'index.html' into the folder we 
created in step 2. You will be prompted to save local 
copies of files: accept this, Make sure your view is set to 
split and change the view to 320 x 480 m the bottom of 
the design view, Click the Live button to see a working 
preview in the design window. 


Create a PhoneGap Build 
account 

Dreamweaver uses a WebKit browser to display your 
content. Now switch to your browser and visit build, 
phonegap.com. Click on the Register button, and then 
sign in with your Adobe ID. Finally click the terms and 
conditions check boxes and hit the Sign In button. 



Open Build Panel 

Back in Dreamweaver, go to the Site menu and 
choose PhoneGap Build 5ervice>PhoneGap Build 
Service - yes. the menus are labelled the same! A new 
panel appears on your screen that prompts you to log 
in with your username and password that you setup in 
the previous step, Then dick the Continue button under 
Create New Project. 


A little patience 

You will be taken to a new screen in the panel 
and there will be several builds such as Symbian. 
webQS. Blackberry, Android and IQS. It'll take a few 
moments for them all to build, and iOS will fail unless 
you upload a provisioning profile to the Build site, Click, 
the Android QR code and you’ll be taken to a larger 
version of it. 





aim 
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_ Emu late application 


In the Build Service pane) there are three 
icons that appear, the fits! of these is 
Emulate, this allows you to run the project 
on your computer if you have the 
emulator installed. 



This is the icon you. will use most of the 
time, because it makes the job of getting 
the app onto the device to test so much 
easier than if you were to transfer dies 
from a computer. 



The final icon, which is the down-facing 
arrow, allows the built application lobe 
downloaded to the computer so you can 
transfer the file to the device manually. 
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At first it might seem like there is some 
sort of secret knowledge needed to 
become fluent with PhoneGap, but all 
the information for it can be found 
online. The API works like any regular 
JavaScrfptbut you can easily spot a 
PhoneGap command because it starts 
'navigator' then accesses the device. If 
you are familiar with using any of the 
HTML5 API s then you'll know that 
this is exactly how the Geolocation 
wor ks in the browser. Hence 
PhoneGap follows the same approach 
as standards. Having a good look at 
dacs.phaiiieeap.com wil I give you a 
handy reference guide to al I the native 
APIs that you can get access to 
through JavaScript on the device, The 
reference contains working examples, 
and of course the slight quirks that are 
encountered as you move from one 
mobile platform to another. 


Snap to install 

If you have an Android phone usea QR code 
reader such as Google Goggles to snap theQR code 
and then download the link. This will 
download tie app right to your 
phone. Once downloaded, install 
the app and when ready, click 
the Launch button on the 
phene to see it. 
j Ceng ralu la tion&: ycu Ve 
[ made an app and installed 
[ it on your device! 


Don’t add 
PhoneGap.js 

When you are using the 
PhoneGap Build service, 
do not include the 
PhoneGapjs' file In the 
folder as this is held on 
their servers and the 
appropriate code is used 
for each platform build. 


Taking a 
picture 

Rename the heading 'Car-make 1 , 
and in the <a href> tag of the code 
add the following 'ondick^getRcQ" This is 
going to call some JavaScript code that will take a 
picture using the phone's builUn camera. Now add the 
code shown after the </ul> tog. this will place an empty 
■mage on the screen ready to accept the one taken 
with the phone, 

001 <brxbr> 

002 <i mg styl e- J 'width; 240px; he igh t: 240px; " 
icN"smallI mage" sre-" 1 ' /> 



Let’s go native 

It's not the most interesting app, but we can 
easily change that and make use of some native 
functionality Bade in Dreamweaver, delete lines 28 to 62 
which are the other pages. Delete the footer from the 
code and get rid of all the links except the first. Make 
the link tor the first just and change the title as shown. 


H Control the camera 

Add the code shown to the head section under 
the other script lines. This links to the PhoneGap library, 
and when the button is pressed, calls the phone’s native 
camera function, which brings back the file URL If the 
camera is successful the function show pic is called, if 
not, the function fail is called. 

001 <script type= H text/javascript" 

charaet="utf-B" sre-" phonega p. j s"x/script> 

002 <script type-'text/javascript" 
charset- J 'utf-B''> 

003 function getPicQ { 

004 navigator„came ra r getPIctu re(show, 

pic, fail, { 

005 quality : 50, destinationTyper 

Camera.Destinat1onType.fILE JJRI 
005 }); 

007 } 



Success or fail 

Now add the remaining code shown that gets 
the picture's id and stores it in the variable 'image'. The 
URi is passed in as the image source to display, if there 
is a failure, then the fail function will show an alert with 
the failure message in it. Now is a really good time to 
save your file. 

001 function show_pLc{uri) { 

002 

003 var image = document. 

getElementById('.smalllmage')f 
004 image.sre = uri; 

005 
006 } 

007 function fail(msg) { alert(nsg); 

008 } 

009 </script> 


Creating icons 

If you look on your phone you will see the 
project lias the default name PhoneGap Build not a 
very descriptive name, and the icons are default. Open 
Photoshop and create a new image, 72 x 72px, Now add 
your image for the icon and create a new folder in the 
root folder from step 1. named 'icons'. 


Save and resize 

Save the image for web as a PNG file and name 
it 'icon-android-72.png - In the icons folder from the 
previous step. Now resize the Image to 40 pixels and 
save again as 'icon-android-48.png’. Finally resize to 36 
pixels and save one last time as icon-andro»d-36.png' r 
this creates icons for different sized devices. 
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Make a splash 

Now inside Photoshop create a new image, 360 
x 48-Gpx, and add your artwork lor your splash screen. 
Now save this as 'splash.png' in the root folder. Having a 
splash screen gives valuable feedback to the user that 
something is happening when they launch their app. 



Setting preferences 

Adding the next lines of code will add the link to 
the splash screen in a similar way to the icons. The next 
line tells the App not to rotate the orientation and keep 
it in portrait mode. The final line tells the app to run at 
fullscreen so the status bar that has the battery and 
signal indicator is removed. 

601 <gap:splash sre=' M splash,png ''* /> 

602 

603 preference name=Orientation" 
valued portrait" /> 

604 

005 preference naine=' f fullscreen' 1 valued"true' 1 

/> 



Install and launch 

Once again, wait a few moments for the app to 
build and then click on the QR code icon to display the 
larger QR code. Snap this again with your QR code 
reader and download the app in the link, Once 
downloaded, install and then launch the app. You will 
see the splash screen fully working as the app starts. 


App settings 

in the root folder you will see a file named 'confkj-xml'. open this 
and change id name to your own. eg , com.webdesigrte^.camtake , . 
change the name to 'Camtake' and change the author settings to your 
own. This will now give the right name when we publish the app again, 
but we need to add information about the icons and splash. 



Add the icons 

In order to get the icons to 
publish to the app, we need to add a few 
extra lines to the config.xml file. These 
lines of code somply tell the app to look in 
the icons folder and apply these icons to 
the actual app when uploaded to 
PhoneGap Build. It's simple but effective. 

001 <icon src- J 'icons/icon- 
android-36. png' 1 width- r 36 H 

height= J, 36’7> 

002 

003 <icon src= jr icons/icon- 
android-4S.png' t width=M8" 
height-MS'7> 

004 

005 <icon src= J 'icons/ieon- 
andr oidi-72. png” width-” 72" 

height-'72”/> 


Rebuild the 
application 

Save the config file now 
and close it to return back 
to the index.html file. Make 
sure the PhoneGap Build 
Service panel is still open, 
and if the QR code is still 
visible, click the button to 
go back to the Build 
Service. In the bottom 
nght-hand comer dick the 
Rebuild Application button 
to recreate the App, 




Use the App 

Finally we have the app fully installed and working on the 
device, click the Take Picture^ button and you will access the phone's 
native camera taking software. Take your image as normal, and when 
you dick okay to return to your app, the image will be displayed. 
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1Blend photos and painterly graphics 


Blend photos 
and painterly 



Make a show-stopping image for 
your website by combining illustrative 
elements with an energetic photo 


tools I tfcclt I trends Photoshop CSS import Mike Harrison 



n this tutorial we will learn 
how to combine illustrative 
elements, such as paint-based 
textures and traditional 
I {rework. with a highly 
energetic photo, creating a 
powerful, artful illustration- We 
don't need to do any real prep 
with this style of image: just dive 
straight in because, like working 
with paint, the process needs to flow from start to finish. 

Inspiration for this kind of work comes initially from 
the photo itself - namely the high energy that it gives 
off, This should make us want to start playing around 
with effects such as paint-based textures and traditional 
elements, which are a sure-fire combination for success, 
particularly when working with sports imagery. 

Photoshop is definitely the application of choice for 
this tutorial due to its flexibility editing options and the 
speed with which we can start seeing results. Well also 
be using a number of custom brushes that are essential 
for working efficiently and are provided on the disc. 




Cut out the image 

Open your image (we're using Dreamstime's 
18369570' here) in Photoshop and, with the Pen tool, 
begin cutting around the subjects body. Hit A for the 
Path Selection tool and. with your path selected. Ctrl/ 
right-click and choose Create Vector Mask. Hold down 
Cmd/Ctrl and click to invoke the Direct Selection tool, 
then go in and adjust the anchor points to clean it up, 



Make a new document 

Create a new document at 235 x 302mm. Fill the 
background with black, then drag your cutout onto the 
canvas. If it's too large, Ctrl/rlght-dlck on the vector 
mask, select Rasterize Vector Mask, then CtrlMght-click 
again and Apply Layer Mask, Scale the image to around 
S0% and position the subject roughly in the centre. 
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Highlights and shadows 

Next, create two Curves adjustment layers and 
dip them to the subject layer with a clipping mask, with 
one for highlights and one for shadows. Move the slider 
to the extreme for each then fill the mask with black. 
Using a white brush at varying sizes, with the Flow and 
Opacity parameters set low, brush onto the mask to 
reveal both lighter and darker areas of the subject. 



Background texture 

We need a slightly textured background so all of 
our elements stand out nicely. Open background, 
texture.jpg' from the resource disc, place it underneath 
ail other layers, then scale it up a little so it fills the 
canvas. It's currently too light, so go to Layer>New 
Adjustment Layer>levels and set the Black Input level 
to 45. This will darken it nicely, but keep it subtle. 
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Enhance lighting and colours 

We need to add more adjustment layers. Create 
one each for Brlghtness/Cantrast. Levels, Color Balance, 
Hue/Saturation and another Curves. First increase the 
contract then darken the subject overall with the 
Curves, Lower the saturation slightly, boost the lights 
and darks a bit with Levels and add a litue more blue, 
cyan and yellow with Color Balance. 



Initial watercolour texture 

We're now going to add the first dose of 
watercolour texture to the project [find ours on the CD), 
Open it and call up Levels with Cmd/Orl+L. Boost the 
white to get hd of any darker paper texture left over 
from the scan. Now go to SelectXjolor Range and. with 
the Eyedropper, select white at 200 Fuzziness. Now 
double-click the layer to unlock it and hit Delete, 



Apply illustrative linework 

Now well focus on the illustrative part of the 
process. We're using a Wacom lntuos4 tablet for this, 
but you can use the Pen tool and then add a stroke to 
the path. Using one of these methods, we want to add 
Imework around the subject's body with a small 
hard-edged brush, This will define the figure more and 
is the first step to a more traditional treatment. Place 
this layer above the subject in the stack. 



A cut above 
the rest 

When cutting out an image with 
the Pen tool don't worry about 
being too accurate. You can use 
the Direct Selection tool 
afterwards to clean up 
any slight errors. 


Adda mask 

Apply a white Color Overlay to this layer, bring it 
into the main document, then scale, rotate and position 
it. From the disc, load 'WG_Watercolor_1.abi / brushes into 
Photoshop. Apply a layer mask to the watercolour 
texture and fill it with black, then use a number of 
different white-coloured brushes to bring in parts of the 
texture around the subject. Using the same brushes, 
create new layers and apply more white watercolour 
with masks until you achieve a nice balance. 



Select watercolour options 

Choose two colours that go well together. Load 
'destilLwatercolour o brushes.abr' from the CD arid, 
underneath the white watercolour layers, create a new 
group for some similar elements. Start addling in a 
variety of coloured brushstrokes around the subject 
and build up until you have a good balance of colour. 
Don! forget to attach masks to some layers, modifying 
the appearance of the layer to best suit its position on 
the canvas in relation to the subject's body. 



Background paint splatters 

To make the illustration more dynamic and 
painterly, we're going to add some paint splatters, 
Source some hi-res splatter brushes online - there are 
tons out there and a quick Google search will find 
plenty. On a number of different layers underneath the 
watercolour layer from the last step, place some 
splatters, but try and keep them subtle so they don't 
distract attention away from your figure. 
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The photo in an illustration like this, 
containing an athlete, can always 
benefit from colour adjustment and 
the enhancement of highlights and 
shadows. This helps give it more 
impact, similar to a photograph shotlti 
HDR. This can be started by simply 
adding two Curves layers. Move the 
graph pointer to the extremes of light 
and dark (or each, then f 111 the masks 
in with black. Using a soft round brush 
with varying sized brush tips and 
flow/opaclty, apply to the athlete in 
the light and dark areas to bring out 
both. Dont forget to zoom in to apply 
this technique to smaller details: it will 
really help to boost the effect. 


Draw shapes for movement 

Now we have a nice base of painterly effects, we 
can build in more flow and energy by drawing some 
custom shapes. Create a new document the same size 
as our mam one and fill with black. Creating new layers 
for each, start drawing shapes suitable to your subject's 
pose. For convenience, we've used a graphics tablet to 
draw them, but the Pen tool works just as well. 


Foreground paint splatters 

To start blending the subject in with the paint 
effects, create a new group above the subfect layer and 
again, on different layers, brush in some white splatters. 
Try to position them around the contours of the figure’s 
body. You can also try and lower the opacity of some of 
the layers in case the effect is too strong in areas. 
Repeat until you achieve relatively good coverage. 



Integrate the shapes 

Drag in all the layers, grouping or merging them 
first if you haven't already, and place them just above 
the illustrative linework layer created in step 5. Position, 
scale and rotate them to enhance the flow of the image. 
Duplicate them twice and repeat, but position on a 
different part of the subject. Move around some 
individual layers within the group for variety. 


Place watercolour effects 

To blend the subject in with the painterly effects 
further, we need to apply watercolour texture over the 
top of it. Using a mix of the brushes from step 9. start 
adding in paint around your subject You will need to 
apply Edit>Transforrn>Warp to some layers and move 
the anchor points to fit. Continue building up layers until 
youVe covered a decent amount of the subject. 


Paint effects for the shapes 

The shapes we've created ail have crisp, clean 
edges, so to blend parts of them in we'll add some 
paint. Create a new layer above the shapes and, using 
step 9’s brushes, work into this layer. Now scale, rotate 
and warp the layer to position it nicely along one of the 
filled shapes, Repeat this a few times with different 
colours and spread it out over the canvas. 





Alter the shapes 

In step 13 we drew a number of filled shapes, but 
also some shapes that are just line art. They are nice on 
their own but, to enhance and bnng certain parts more 
attention, we will add some thin brushstrokes over 
them, Repeat the previous step, but instead of applying 
to the filled shapes, apply to the lme art shapes instead. 
This step is all about boosting the subtler details, 


17 Finer watercolour detail 

Clip another layer to the model using a clipping 
mask. Using brushes of your choice, apply white to the 
areas of the subject where you Judge more is needed. 
Also group the subject layer and all its adjustment 
layers and apply a mask to that group. Using a brush 
with a Flow of 30%, erase parts of the figure to let some 
colour show through from behind, 





Final tweaks 

To wrap things up, first create a new Brightness/ 
Contrast adjustment layer above all others and increase 
the Brightness by around Sand the Contrast by around 
10. Depending on your colours here you also may want 
to add a Hue/Saturation adjustment layer and bump up 
the saturation to 
intensify the vibrancy 
of the colours. If 
you're not happy with 
your colours, you can 
create a Selective 
Color adjustment 
layer and play around 
with the sliders until 
you are satisfied, 
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Create a 
ribbon effect 
using CSS3 

Here's how to create an impressive 
ribbon effect using just HTML/CSS3 
and our step-by-step advice 

tcKklsIiGr.hltrtmclK HTML, CSS3, Dreamweaver 
exp tut Neil Pearce 



he advantages of using CSS3 over any 
of the alternative, older techniques 
extend far beyond just how cool CSS3 
can make your pages look - even 
though that s a benefit that should not 
be ignored. As you'll learn throughout 
this tutorial. CSS3 allows you to create 
some really beautiful effects* adding that 
polished finish to your web designs that 
make them stand out from the others, Of 
course, without CSS3 these visual effects 
can be achieved using alternative tools such as 
Photoshop. JavaScript or even Flash. However, the main 
benefits of using CSS3 for your visuals are the ease of 
development and maintenance of your pages, as well as 
greater usability and accessibility, which makes your 
pages more adaptable across devices, in the age of 
responsive design, this is of more importance than ever 
before. So, in this tutorial we are going to make full use 
of what CSS3 has to offer and create a ribbon effect 
using purely HTML and C553. 

Ribbon effects are an easy way to add style to your 
page, and a great way to find inspiration is by looking at 
websites that make great use of them. Just take a peek 
at the online portfolio of web designer Alex Pierce 
f thegeekdesigner.com) . or the ever dependable 
HTML5 Boilerplate ih tml 5 boile r plate.com} 

The benefits of using CSS3 are ease of 
development and maintenance, as well as 
greater usability and accessibility 



Getting set up 

Open your chosen Text editor (we will be using 
Dreamweaver for the duration of this tutorial) and 
create a new HTML file; call it 1ndex.html’. Then create 
another new file and call that styies.css' Then create a 
new folder, call it 'css' and place the stylesucss file within 
that. Now link your CSS file within the head of your 
HTML file, like normal. 

001 <head> 

002 <title>A ribbon effect using CSSK/title> 
003 <meta charset="UTF-S” /> 

004 < 1 — CSS —> 

005 clink rel="stylesheet” type= ff text/css” 
href-'css/styles,css" /> 

Main wrapper 

What we are going to do here is add in our main 
wrapper, so we can centre all the content using CSS. It 
would make sense to use the HTML5 section tag and 
give it an ID name of wrapper". This, you will then place 
just under the opening ^body* tag. 

001 csection id-Vrapper"> 

002 </seetionx!— END wrapper —> 

Container 

Add in a container dlv that will be used as the 
body of the content area. Essentially, the bit of the page 
that the ribbon will fold around. Give it a class name of 
'container' and add an HTML comment on the closing 
</div> tag so we can see where this section ends if our 
markup gets a bit busy. 

001 <div clas 5= "container^ 

002 </div><!-- EMJ container —> 

The ribbon rectangle 

We are going to add in the markup tor the body 
of our ribbon. We will give it a class name of 'rectangle' 
to indicate the shape, arid again add in an HTML 
comment to indicate the end div. Then, inside this we 
can add our title using an <h2> tag. To make life easy, 
we've chosen the title 'Cool CSS3 Ribbon', which is 
pretty self-explanatory. 

001 <div cla£s= fh rectangle ,r > 

002 <h2>CcK>l CSS3 Ribbon</h2> 

003 </divX! — EfC rectangle —> 

Left and right corners 

What we need to do now is add the HTML 
markup for the left and right-hand corners of the ribbon. 
We will add this directly underneath the rectangle div 
and give each one its own class name. First, let’s give 
the left-hand side a class name of 'left trf, and following 
suit on the right we give it a name of rightjri'.. 

001 <div class=”left_tri”x/div> 

002 <div class="right_tri"x/div> 
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Cool CSS3 Ribbon 
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<Left> 

-Adding the header tor 
our rl bbon doesn t look 
like much when viewed 
tin ou r browser 
- Now we have the 
content added. It still 
doesn't look all that 
great-It really needs 
some styles 
-The header is starting 
to take shape now we 
have set the reset and 
some other of the 
default styles 


Main content 

!n this step we will finish our HTML with the 
markup for our mam content section. We will give it a 
class name of 'content' and place an <h2> header tag 
with our title within. Then a short sentence using the 
paragraph tag <p>. 

001 <div class="content"> 

002 <h2>It's just CSS, that's alli</h2> 

003 <p>Web Designer - defining the internet 
through beautiful design</p> 

004 </divx3— END content —> 

The CSS reset 

To do this, we open our styles.css file and first 
add in our reset. The reset will take away all the browser 
default styles and allow us to start from a clean slate. 
And as we used an HTML5 tag fand just in case we will 
add more at a later date), we need to specify them as 
block level for IE. 

001 7* Reset */ 

002 html, body, div, span, hi, h2, h3, h4, hS, 
h6* p, blockquote, pre, 

003 a, font, ihig, ul t 11 { 

004 margin: 0; 

005 padding: 0; 

006 border: 0; 

007 outline: 0: 

008 font-size* 100ft; 

009 vertical-align: baseline; 

010 background: transparent; 

011 } 

012 pi, ul { 

013 list-style: none: 

014 } 

015 7* End Reset *7 
016 /* HTML5 *7 


017 section, aside, nav, footer { 

018 display: block; 

019 } 

Body styles 

Let's set the background and the font family. We 
first give our page ah off white colour ffflflfl and then 
set our default font-family, font size and colour. 

001 body { 

002 background;#fIfIf1; 

003 font-family: Georgia, Verdana, “Lutida Sans 
Unicode”, sans-serif; 

004 font-size: 12px; 

005 color: #999; 

006 } 

Title and wrapper 

t's time to style our header tags <h2> for our 
main title. We are going to set the font style to italic and 
make sure the font weight is set to normal. Then we 
centre our content using margin and set the content's 
width to 400px. 

001 h2 { 

002 font-style: italic; 

003 font-weight: normal; 

004 line-height; 1.2em; 

005 > 

006 ^wrapper { 

007 margin; 50px auto Qpx auto; /* centered 
*/ 

00S width: 40@px; 

009 } 

Container 

Now we are going to style our container, which 
is our main content area. We need to make sure it is 


positioned relative and make sure all content is centred 
using margin. Then set the background to white. Now 
we are in a position to write our first bit of C553 and 
give our container rounded corners and a drop shadow. 
Then, because we have positioned this relative we can 
now use the z-indejt property. 

001 .container { 

002 position; relative; 

003 margin; 0px auto; 

004 width: 350px; 

005 background: fifff; 

006 bonder-radius: 10px; 

007 box-shadow: 0px 0px Spx rgba(0,0,0,0,3); 
008 zr index: 90; 7* the stack order: 
displayed under ribbon rectangle (1001 *7 
009 } 

Ribbon body 

We set the ribbon's colour to #6d6e72 for a dark 
grey vibe r and set its height and width. We then make 
sure it is positioned relative so we can then use left and 
top properties in order to position it further. This also 
this allows us to then make sure it sits above the 
container using z-lndex: 100. 

001 .rectangle £ 

002 background: #6d6e72; 

003 height: 50px; 

004 width: 380px; 

005 position; relative- 
006 left;-15px; 

007 top: 3®px; 

008 float: left; 

009 box-shadow: 0px 0px 4px rgba(0,0,0,0-55); 
010 z-index; 100; 7* the stack order; 
foreground *7 

011 } 
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| Create a ribbon effect with CSS3 



i trJfft-A I w/n^tl/TWlrtipp t ret nhhon/indnf hfml 


CoofCKjJtfflton 
tat css .rtariaiT 

Web Desipwr - cWintaj ihe internet Ihtn 


f Vwf (?&;} Ribbon 




<Left* 

* Adding the styles for our container allows us 
to see our rounded corners and drop shadow 

<Abnve> 

‘.Styling trie rlbhon's header tag has really 
started to give us the erfect we need 

^sIbU> 

‘We need to add styles to the inner content 
that will Increase ou r cental nefs height 

* Adding padding and increasing the Inner 
header tag has us almost there 


Ribbon header 

We have already set some default styles to our 
<ii2> tags a few steps back, but now let's make the 
header which is on the ribbon a lot more prominent. 
First, increase the size of the font end give it a colour of 
white. Then push it down slightly using paddingiop. and 
then we give it a subtle drop shadow using the 
text-shadow property. Last of ail we align it centre. 

001 .rectangle h2 £ 

002 font-size: 30px; 

003 color; #fff; 

004 padding-top: 6px; 

005 text-shadow: lpx lpx ?px rgbat^G^A ?); 

006 text^align: center; 

007 } 

Left corner 

For the ribbon corners, we will make use of the 
border property. A border has four sides that are placed 
together as four small triangles, and we can specify 
each one's colour and opacity by using border-color, 
and thus create a triangle. So here we have used CSS 
shorthand to create a triangle, specified its height and 
width and positioned it to the left. We then make sure it 
is positioned under the ribbon using z-index. 

001 , left_tri { 

002 border-color; transparent #333 
t ranspa rent transpa ren t; 

003 border-style: solid; 

004 bo rder-wid th: 15px; 

005 height :0px; 

006 width;@px; 

007 position: relative; 

006 left; -3@pse; 

009 top: 65px; 


010 z-indev: -1; /* displayed under 
rectangle*/ 

011 } 

Right corner 

Now create the right-sided ribbon corner using 
the border property. .Set the top. nght and bottom to be 
transparent and the left side of our border to be a 
darker colour than our ribbon. Then specify its height 
and width as zero and position if using left and top. 


001 

.right_tri { 

002 

border-color: transparent transparent 

003 

transparent #333; 

004 

bo rder-sty1e:solid; 

005 

border-width:15px; 

006 

height:0px; 

007 

width:0px; 

006 

position: relative; 

009 

left; 3S0px; 

010 

top: 35px; 

011 

z-index; -1; /* displayed under 

rectangle*/ 

012 

} 

15 

Inner content 

We now have a ribbon wrapped around a 

rounded content section. The next step is to add some 
styles to our content. Use padding to position it within 
the section, and increase the inner h2 tag to20px. 

001 

.content £ 

002 

padding: 60px 25px 35px 25px; 

003 

} 

004 

.content h2 { 

005 

font-size; 20px; 

006 

} 


Styling the text 

Now we have our content positioned nicely, let's 
set some styles for our text. -Call on the .content class 
and point to all its <p> tags. Then we push the text 
slightly down using paddlng-top and set its font size to 
I4px. And last of all. we'll give each line some breathing 
space and set the line-height to 22px. 

001 .content p { 

002 padd i ng- top: l@px; 

003 font-size; 14px; 

004 line-height; 22px; 

005 } 

Adding a link 

The content we have seems a little scarce, so 
Sets add a link underneath the text. In the mdex.html file, 
underneath the paragraph, add the link with a <p> tag. 

001 <pXa href=*'http: / /www, webdes i gnermag, 

co.uk/”>Web designer mag!</ax/p> 

Styling the link 

Our last step will be a simple one. All we are 
going to do is finish off our link with a nice orange 
colour and a hover state. So as you can see. you don't 
need images to create graphics anymore, and CSSS will 
only get more and more used as It begins to settle in to 
becoming the standard version of CSS. 

001 .content p a { 

002 color: #c4591e; 

003 text-decoration: none; 

004 } 

005 .content p a;hover { 

006 text-decoration: underline; 

007 } 
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customer and leave reviews of 
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Bookazines 


Back issues 


iussr 


■nfif 


tel 


ni 


Book 


creating stanniag 


Itssim 


■■9999 


■ M? 


iillff! 


■i 


SS« s SSSSS>f!5 


BBSS 




SSs! 








■■a 


isaaa 


5C’ 




The Web Design Book Vol. 1 

Bringing you up to speed with the new digital 
landscape, the The Web Design Book Vol. 1 will 
give you a tour of the latest developments in 
web design and show you how to use these new 
tools to create a truly original sitr 
£14.99 


BWeb Design Vol. 6 

Creative guides for designing 
next-gen websites. I n-depth 
features to bring you up 
to speed on all the hottest 
technologies. Stcp-by-stcp 
tutorials showing you how 
to design amazing websites 
using CSS3.HTML5, Flash. 
Photoshop and more. 
£ 14.99 


Web Design Vol. 5 

This book provides a 
comprehensive collection of 
visual lessons on the essential 
techniques needed to create 
awe-inspiring websites. 

£6-49 with code " DOTCOM* 


Add creativity and flair to your online projects 
with an essential range of training products for 
hobbyists and professionals 


Web Designer eMag Voi 2 

A complete archive of Web 
Designer magazine issues 137- 
L48. Over 824 pages of cutti ng- 
edge trends and techniques! 
Free - 256 page Web Design 
Vol. 03 bookazine included in 
pdf format. 

£ 9.99 


Web Designer eMag Vol. 1 

Enjoy 21 issues of Web 
Designer on one interactive 
disc. Over 1800 pages 
of expert tutorials, case 
studies^ features. Plus 
bonus tutorial workshop files 
included. 

£9.99 


DVDs 


Web Design: From Desktop 
to Dotcom eM^gVbi.l 

A visual guide to Flash. 
Dreamweaver and Photoshop. 
256 page s of walkthroughs 
on one disc! A prujeet-ibased 
workout for any webslingerl 
Master tools, rece ive techn ica l 
advice and read inspirational 
features. 

£ 4.99 


Order online 


imagineshop. 


lco.uk 


ETs3 
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PUBLISHING 


EmaiI e ahay'ltimauin e- publnshtng.CO.uk 
Twitter imagimeshopuk 
FsceBaok /ImagineShapUK 
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DVDS 


DOWNLOADS 
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Prices correct at time of going to press. 
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Need an inspirational site dissected? ) webdesigner@imagine-publisl3infl.co.llK 



An image-fuelled 
nature trail 


INSPIRATION 


Going the 
extra mile 


inspiration naturevalleytrailview.com 


:[ hen you have such 

stunning scenery like 
the Grand Canyon, 
Yellowstone National 
Park or the Smokey 
Mountains to show off, 
then imagery, and in 
particular photography, 
are going to lead the way for the site. 
The Nature Valley Trail View does this 
perfectly by allowing a fullscreen image 
gallery to jump into these amazing 


parks. However, the site does not end 
there with its amazing photography. 
The site continues to push boundaries 
by using the same photographic 
equipment used in Google Street 
View and attaching it to hikers. 

The result gives the viewer 
360° access to some of 
the most stunning trails 
in the US. that can be 
explored from the ease 
of a website. 


Established 
navigation metaphors 


As the site moves Into each trail there 
is a lot of information cm offer - so the 
creative agency, Your Majesty, kept the 
interface as simple as possible. They 
stuck to established navigation 
methods like Google Street View so 


Enormous amounts of work go into 
creating websites, and this isn't always 
appreciated by the audience. When 
capturing photographic data for the 
trails, the Your Majesty team racked up 
18TB of video data, or in simple terms. 
109 fiours of video footage. When 
viewed as still imagery this covered 
2,3675 miles of terrain - or to really 
impress you, 10.8 billion pixels of 

k panoramic imagery! They also took 
147914 GPS points to map the 
content to. which resulted in 5GB 
| of XML data! 


points of interest can be explored 



Colour 

A simple,yet highly 
effective colon r scheme 
allows the key co ntent of 
the site to sta nd out 
against the beautiful 
images in the background 
of the pages. 


Navigation 

Navigation fol lows a sim ple 
image ga Mery that most 
users are familiar with. By 
sliding through the different 
parks these pages act as a 
springboard to go deeper 
Into each of the trails. 


along the way by the user. 


Imagery 

Beautiful photographic 
images lead the site to 
show off the amazing 
scenery that is being shown 
off insid e the site. The 
images are fullscreen and 
scale with the browser. 


Fullscreen 

This.site for the Nature Valley 
Trail View Is Just a giant 
fullscreen navigation to 
exp lore each of the three 
featured trails In more detail 
and reveal more photography 
about each trail. 


Typography 

The curved 
typography ad ds a 
good point of interest 
and It Is positioned 
noticeably in the sky 
on each of the pages 
that show the content. 
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An image fuelled nature trail | 



<conunent> 


what our 
experts tfiink 
erf the site 


Photographic Immersion 

"Our goal was to use today's camera technology to bring a fully immersive, rich 
photographic experience to users to make them feel they are actually on the 
trails. By a combination of the Dodeca 360 footage and manual stitching of 
Canon 5 D Mark II footage, I think we reached the perfect balance beLween 
ease of use. bandwidth optimisation and photo realism." 

Jen* Karlsson, executive creative director & photographer, Your Majesty 



TECHNIQUE 


How to do it yourself 


Download the plug-in 

Download theiQuery plug-ln 'Super Sized' from 
biiildifitemet coiTi/prcHfect/suDersized and unzip. This 
provides the core functionality for fullscreen slide 
shows. Create a new web page and save it inside the 
'slideshow' folder of the downloaded folder. Add the 
following links to the CSS files which power the look and 
feel of the full size image slide show. 


@01 <link re 1= ,J stylesheet" href= rj css/ 
supersized.css rj type= JJ text/css" 
media=”screen" /> 

002 clink rel= H stylesheet" href= hJ theme/ 
supersized, shutter. css Jd type= J 'text/css u 
media="screen" /> 


link the code up 

Now add the following code in the head section 
of the page, which links to the relevant jQuery code, the 
plug-in and an easing library. These are ail important 
script sources that will enable the slide show to run in 
the background of the page that you place them on, 
Because It runs In the background you can place any 
content you like over the top of the page, 

001 <script type= J 'text/javascript J< 
src= JJ https://ajax, googleapis, com/a jax/ 

1ibs/jquery/1.6.1/j query.min.js"></ 
script> 

002 <script type^^text/javascript^ 

5 rc =J, js/jquery, easing, min, js J, x/script> 
@03 <script type=”text/javascript" 
s rc="js/supersized.3.2.7.min,js"></ 



Slideshow 

Here we 3 ve created a fullscreen slide show that 
can have any content over the top. as this is a 
background slide to enhance your main content. 


script> 

004 <;script type="text/javascript" 
src 2 ‘'theme/supersized. shutter .min. js”X/ 
script> 

Set the slide show 

To start the slide show we call the pQuery 
function, then the supersized function. Inside the 
supersized function we can place our default settings. 
Here weVe set autoplay to false and told the slide links 
to open in a blank window so that the main page stays 
open behind it. The last option is the actual slides that 
will be shown in the background. 

001 <script type="text/java5cript"> 

002 jQuery(function($){ 

003 S.supersized({ 

004 autoplay ; 0, slide.links : 

'blank J , slides : [ 

Add the slides 

Copy the remaining code in to add the slides. Be 
sure to put your own Image and link In here for when 
the page is clicked on. To add more slides, simply copy 
the first line shown for each slide. The square bracket 
doses the slides, while the remaining brackets closed 
the supersized and jQuery functions respectively. 

001 {image : 'image_url_here * t url : 

1 link_url_here '} t 
002 ] 

003 }); 

004 »; 

005 </script> 

Adding control 

Anywhere In the body section of the page, add 
the following links. These will give navigation links for 
each side of the screen to cycle through the slides that 
we added in the previous step. Save this, and test in 
your browser to check it has worked. Remember, just 
add any content to the body section to create your 
page over the top of this. 

001 <a id=”prevslide" class=”load- 
itenTx/a? 

002 <a id= J 'rextslide JJ class= J, load- 
item J 'x/a> 



TECHNIQUE 

Creating fullscreen 
images 


Currently the most common size screen 
resolution for when people are browsing 
web pages is 1,280x800 but with some 
monitors boasting 1,920x1.080 so it 
becomes difficult to know what size to make 



What size image? 

The first point to remember when 
creating full screen images is that there are 
no hard and fast rules here, image size can 
go as low as 1,024x760 without looking too 
bad on larger monitors, so don't think you 
have to go for 1.920x1.080, 



Content counts 

Q 2 Images that have large areas of 

colour that is similar, and those that 
have blurry coloured areas or have 
out-of-focus backgrounds will compress 
better and not look too blocky when viewed 
on larger monitors. 



Compression ratio 

Make sure you use the preview 
window in Photoshop for compressing to 
JPEG when saving for the web, it should not 
look blocky from over-compression, and try 
to go for as high a setting as the image will 
allow. This will mean the images scale better. 
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Need an Inspirational site dissected?0 webdesigner@imagme-publishing.co.uk 



Animated and 

interactive 

infographics 

inspiration www.evoenergy.co.uk/uk- 
energv-guide 


nfographics remain a 
hugely popular way for 
designers to showcase 
their skill, and explore 
Jiiiiiii. data lfiat can extract 

surprising finds, 

In the past they 
tended to be static 
drawings created in Photoshop and 
loaded up to the web. More recently 
however, designers have started to 
push the boundaries, taking advantage 
of easily implemented animation 
through JavaScript or CSS3 animations. 

Adding interactivity immediately 
makes infographics more appealing, 
especially if the reward is a spectacular 
animation. The core appeal and 
success criteria Is the ability to visually 


represent the data in an easy, accessible 
manner, Varying the volume and 
dimensions of an object are Just one 
way to Illustrate data that changes, or to 
provide a comparison between 
different data elements. 

Not all interactions will be obvious, 
especially where the data or illustration 
is complex. Signposts can be used 
within the design to help overcome any 
usability Issues, and a careful choice of 
user Interface elements will minimise 
potential user confusion. 

Simple animations, like a doud 
moving across the sky or a balloon 
floating can bring the page to life, 
encouraging visitors to experiment 
with the page and spend time exploring 
the information within. 



What our 
experts mink 
of the ste 


Simple, clean and inviting 

The key to making an interactive infographic work is enticing the 
visitor to play with the data and controls, and most importantly to 
reward their play with visual effects and obvious results. If 
something looks like a button, you need to make sure it does 
something to avoid frustrating users trying to interact with it. ,h 

Sam Hampton -5mith 




Animated - 

background! 

The background 
Image changes 
position and colour 
according to the 
amount of scroll in the 
window, making the 
page immediately feel 
alive and responsive to 
user interaction. 


,K. 


UJ 

CONSUMP1 


Clean aesthetic — 

The dean aesthetic 
used here m a kes the 
design feel 
contemporary, but 
also simplifies the 
introduction of 
interactive elements, 
The design feels 
coherent but allows for 
procedural elements 
to be drawn at 
rendering time. 


Subtle bouncing 

animation 

In a couple of places 
on the page the 
developers have 
animated elements 
with a subtle bounce. 
This doesn't scream 
out, but further 
supports the 
interactive, alive feel 
of the page. 






TECHNIQUE 

Create a 
repeating CSS 
animation 

CSS3 has- brought the ability to create 
and fire animations in-browser, without 
external scripts or plug-ins. Animations 
don't have to be triggered by user 
Interaction, and can nun indefinitely. This 
reduces the rendenng load on the 
browser (as typically effects are rendered 
using your device's GPU. where an 
equivalent JS effect wouldn't, using more 
processor time, slowing the page). 



Define the animation 

qj CSS3 can now define preset 
animations that can then be 
applied to multiple elements, We can 
create different animations for different 
behaviours, each with a set of keyframes 
describing individual properties. 



Apply the animation 

02 Once the animation preset Is 
complete, apply it to your 
dement using the animation keyword, 
and specify the speed and amount of 
repeats the animation should make. You 
can specify infinite to nun it forever. 



Test the animation 

qj As CSS3 is still being 

implemented, you'll need to 
create multiple versions of each 
animation preset to use vendor prefixes, 
Provide a fall-back for old browsers, or 
consider It a progressive enhancement. 
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Animated and interactive infographics | 


TECHNIQUE 

Animate according 
to scroll position 

Create two graphics 

This sky effect is achieved by 
•overlaying two <div> elements, the same 
size, with different background images. 
Create two documents in Photoshop and 
apply gradient fills for your different skies. 

Position and apply 

Position the two <div>s behind all 
your other content, and arrange them 
absolutely. As the window scrolls, well 
reduce the opacity of the foremost <div> to 
create a fade to the one behind. 

A little bit of script 

Use JavaScript to gel the scroll 
position of the window. Write a function that 
uses the scroll position to calculate the 
degree of opacity for the top-most <div>. 

Test until you get a nice transition beftween 
the two backgrounds according to the 
amount of scroll. 

00 1 $(doc ument>.ready(function(){ 

002 if Get the scroll position of the 
window 

003 fadeBackground(S(document).scroll 
TopQ); 

004 // If the page is scrolled, call 
the function again 
005 $(document),scroll(function0 { 
006 fadeBackground<i{document), 

scrollTopQ); 

007 }); 

00 B }); 

009 Use the position to calculate 
opacity 

010 function fadeBackground(scrollpos 


INSPIRATION 


Animate your 
page to life 


A great way to make your page feel alive 
and responsive to user input is to have it 
respond to normal user input in unexpected 
ways. This page changes the background in 
response to the user scrolling down. The 
effect is subtle, but helps to cement the idea 
that the experience is interactive, it's also 
pretty easy to achieve using modern 
JavaScript libraries such asjQuery, Lets 
break down the process to see how quickly 
you can implement something similar. 



) C 

011 if (scrollpos < 300) { 

012 opacity - parselnt(100 - 
(scrollpos/300 * 100)); 

013 if (opacity > 99) { 

014 *(“, divl"). css ({"opacity"; 1}); 

015 } else if (opacity<10) { 

016 t C ■ divl"). css ({"opacify”: @)); 

017 } else { 

018 $r.divl"). 

C$S({“opacity”:(opacity/100)}); 

019 } 

020 } else { 

021 t(".divl M ) r css ({“opacity”^}}; 
022 } 

023} 
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Get your site seen, or suggest a theme 

Tweet us with the URL or topic %■ @WebDesignerMag 


Design J 


Footers 

The bottom of the page has traditionally been 
given over to the footer. Here we unveil a collection 
of creative footers that don’t all stick to the standard. 
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20 PHP TOP TIPS 



Jeffrey Way offers essential tricks for designers 


et’s target the elephant In the room; PHP 
has been on the receiving end of a 
considerable amount of flack In the last 
few years. Well who are we kidding? It’s 
always served .as the punching bag for the 
'cod kids’ But there's just one thing; despite 
■ all of this ridicule, PH P continues, with ease,, 
to remain infinitely more popular than its 


server-side competitors - at least in teems of the amount 
of users It consistently has. 

So how can a language as mocked as PHP be so 
popular? The answer is simple: PHP was specifically built 
for the web. Once installed, a beginner can execute his 
first PHP command and view the output in a web browser 
in less than a minute. Do not underestimate how 
significant this is to new developers. 


k k HOW CAN PHP BE 
SO MOCKED AND YET 
SO POPULAR? JT 


EASY DOCUMENTATION 


PHP is an inconsistent language, particularly 
when it comes to things such as the argument 
order for Its various functions. Do we set the 
haystack as the first or second parameter of the 
stristr function? It's easy to forget 
Assuming you Ye not using an IDE, you’d likely 
perform a q u ic k Google sea rc h for the solutio n. An 
easier method is to pull up Terminal, and type; 


Referring back to the previous example, to 
determine the correct argument order for the 
stristrfunction, we can run; 


mi php —rf stristr 


001 php — rf FlHCTIOM_NAME 


This command will return 


001 Function [ <internal:standard> 
function stristr ] { 


m2 

003 

] 

004 
005 
006 
007 } 


- Parameters [3] { 

Parameter #0 [ ^required* Shaystack 

Parameter #1 [ <required> $needle ] 
Parameter #2 [ <optional> $part ] 


That was easy! Now we can see that, yes, the 
haystack should be set as the first parameter. 
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ARE THE CRITICISMS 
WARRANTED? 

(t‘s important that we never blindly choose sides; we 
must always remain objective when discussing the 
pros and cons of development software. 

Is PHP Hie most beautiful of languages? Certainly 
not spend a few days with Ruby or Python, and you'll 
be introduced! to significantly more elegant languages. 

Is PHP littered with inconsistencies, ranging from 
out-of-sequence parameters to confusing 
capitalisation? For sure 

But, Is PHP the easiest server-side language to get 
started with? Without a doubt, yes. This leads many to 
assume that PHP developers are Ignorant and 
inexperienced. This couldn't be further from the truth. 
Sure, with popularity comes a wave of newcomers, but 
in our eyes that's a good thing,, they're the next 
generation. This level of popularity also comes with 
countless seasoned developers. Is it possible to write 
beautiful code in PHP? Gosh, yes. One only needs to 
review modern frameworks, such as Laravef, to 
confirm this truth. 

So yes. PHP has its fair share of problems, but 
then again, so do all languages. Trust me when I tell 
you that 'WAT' is sprinkled throughout every 
language. The difference is that seasoned 
developers know how to leverage the good parts of 
the language. 

Now we've established that PHP is certainly not a 
language to be embarrassed by. I'd like to share 
twenty various tips with you - everything from fun 
simple tricks, to best practices, to some of the new 
syntax options in PHP 5,4, 


PHP 5.4 

The latest and greatest version of PHP, version 
5,4, was released on March 1 2012 With this 
release came a variety of new Improvements. 

It's very possible, however, that you Ye using 
an MAMP or WAMP stack. If so, you may find that 
version 5.4 isn't available to use yet At the time 




There tends to be a natural progression for new 
developers: learn, discover, abuse, mature. 
Which, expanded, means: 

- Learn the basics 

• Dlscove r the trl cks and shorth a md 

• Abuse the shorthand, creating horribly 
unreadable code 

• Matu re as a developer, and embra ce rea da bi lily. 


^ taruwl B3 


A Framework For Web Artisans 



<AliovfR> La ravel is a new, expressive PHP framework,, 
which Is rapidly gaining popularity in the community 



of this publication, this is true for the massively 
popular MAMP app, available at mamp.Jnfo, 

To get around this, we have two options: 

• Compile the latest version of PHP, which 
frequently isn't as simple as we might hope 

• Make use of a different MAMP/WAMP stack, 
including BitNami Cbitnami.org/stacks), Zend 
Server iw w w.zendxom/en/prod ucts/server- 
ee), XAMPP (www,apachefrtends.ora/eci/ 
xampp.html), and AMPPS (www.ampp5.com). 

Please note that if you intend to take 
advantage of PHP 5.4's new features, then you 
should also ensure that your web host has 
upgraded as well. 

While MAMP is easily the most 
popular stack for Mac, it's also one of 
the most rarely updated 



Vourgoal is to reach that fourth stage: maturity. 
While it s most certainly fun to test ourselves to 
see just how much logic we can fit into a single 
line, doing so is largely considered bad practice. 
Remem ben readability trumps everything. If 
three extra lines will make the code significantly 
mo re rea liable in six month s, th en go rig ht a head 
and add those three lines! 


HPHPHASITS 
PROBLEMS, BUT 
THEN AGAIN, SO DO 
ALL LANGUAGES TV 


ARRAY BRACKET 
NOTATION 

Hopefully, we're all familiar with the basic syntax for 
creating simple arrays. 

Simple Array 

001 $myArroy = array( 'one' , 'two', 'three'); 

Associative 

001 SmyArray = array{ 

002 'first’ => 'Napoleon’, 

003 'last f -> 'Dynamite f 

004 }; 

In PHP 5.4, we can use a streamlined, bracket 
notation that most JavaScript developers will 
Immediately recognise. 

Simple Array 

001 $myArray = ['one’, ‘two’, 'three']; 

Associative 

001 SmyArray = [ 

002 'first’ => 'Napoleon’ f 

003 'last' => 'dynamite' 

004 ]; 

Particularly as a developer whose time is split 
equally between JavaScript and PHP, this is a 
welcome addition to the language. The less 
language shuffling we have to perform in our 
heads, the belter. 
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20 PHP TOP TIPS 


SHORT TAGS 

Those of us who have been working in 
PHP for quite some time will be familiar 
with a few different methods for 
embedding PHP Into a page: short tags, 
ASP tags, and the standard method that 
mos t use today. 


Standard 


<?php echo ‘■hello'; ?> 


ASP Style 


001 <% echo ‘hello'♦ %> 


Short Tags 


001 < 7 = 'hello' ; 7> 


Don’t use the ASP method - ft’s disabled in 
your phpM file by default, and for good 
reason. As of PHP 53, short tags were 
largely discouraged, and labelled as a bad 
practice. The reason for this was because 
there was no guarantee that the server 
would have short tags enabled. As a result, 
most of us generally recommended that 
all PHP developers stick with the standard 
form: <?php echo 'hello': 7>. 

As of version 5.4, however, this is no 
longer the case for the echo short tag 
syntax: <?=, You are free to use this 
shorthand syntax without worry, due to 
the fact that now, <?■ has been decoupled 
from the shortjag setting, regardless of 
what is declared in the configuration file. 

4 4 THOSE OF US 
WHO HAVE BEEN 
WORKING IN PHP 
FOR QUITE SOME 
TIME WILL KNOW 
A FEW DIFFERENT 
METHODS FOR 
EMBEDDING PHP 
l INTO A PAGE JJ 


GET OFF MYSQL _ CONNECT 


One of the most frequent criticisms of PHP is that it’s 
open to a variety of attacks. Unfortunately, these critics 
are misinformed. The truth is that, yes, if the developer is 
not acting responsibly, a PHP application can be the 
victim of all sorts of attacks, ranging from SQL injection, 
to CSRF That being said, as tong as he follows a few 
simple guidelines, this quickly becomes, as much as 
possible, a nonissue. 

Easily, the most ubiquitous of PHP mistakes stems 
from SQL infection. The basic concept is that the 
developer unwisely allows user input to be embedded 
into an SQL query Consider the following scenario: 

001 1 SELECT * from my Table WHERE id-"’ . $_ 
GET[ H id'J . *»'i 

This is terrible! You assume that the id key from the 
SGET super-global array will indeed be an integer, at 
which point you can select the desired row from the 
:. i :■!« • w-i; •' I n-o-k: cleverly enq the query,-!' r 
drop the table? 

001 $_GET[ 4 id ? ] - t,r ; drop table myTable'] 

That value will then be embedded Into the SQL query: 

001 1 SELECT * from my Table WHERE id = drop 
table myTable 1 ; 

Goodbye table! Another example would be to translate 
a request for a single row in the database into one for 
all the rows. 

001 $_GET[Qd'] = <r '” or r; 

002 c SELECT * from myTable WHERE id = or 
1 '; 

By passing or 1, we've now spedfied that, because 1 will 
always be true, the SQL query should return all rows 
from the table! 


A basic rule of thumb is to treat all user-supplied data 
as malicious. There are a multitude of ways to protect 
against these types of attacks, including the use of 
my&ql_real_escape_string. 

Though this will work, save yourself the worry 
and stop using the basic mysql API to query your 
database. PHP actually provides three different APIs for 
connecting to a MySQL database - mysql being the lasL 
one you should use. 

Note: mysql_ccnnect is expected to become 
deprecated in a future release of PHP 
Instead, take advantage of the PDG API and 
prepared statements. The advantage to this technique 
Is that the user-supplied data Is never physically 
attached to the SQL query. This way it's not possible 
(we! nothing is impossible) for the user to embed 
malidous date that will harm your data structure 
With PDQ and prepared statements, we can do: 

001 $conn = new POO(“mysql:hosteLocalhost;dbnam 
e^nryDatabase", Susemame, Jpassword); 

Use real prepared statements. Don’t emulate. 

001 $conn->setAttribute( PDO::ATTR_EMULATE, 
PREPARES, false); 

002 tstmt - Sconn->prepare(* SELECT * from 
myTable WERE Id - :id'); 

003 $stmt->exeeute([ 

004 ‘: id' => $_GET[ ' id" ] 

005 ])■ 

006 $ results = fctmtof etch All (PDO:: FETCH. 

OBJ); 

The considerable advantage to this method Is that the 
parameters are being bound after your SQL query 
has been prepared. If you come across articles online 
that make reference to the performance differences 
between uang the traditional mysql API, versus POO, 
ignore them. The variance is negligible. 


A BUILT-IN WEB SERVER 


As of PHP 5.4, we can finally make use of its built- 
in web server - ideal for those who want to 
develop and test locally. This also means code 
can be written and tested without a fully-fledged 
LAMP configuration. All the testing can be done 
via the command line and simply shut down 
when finished.Simply browse to the directory on 
your computer where your PHP application is 
stored (regardless of whether it’s In Apache's 
document root) in the command line, and type: 


001 php -S loca 1 hos t; 88SS J id * ] , 


This will create a development server for the 
current folder on port 8888. 


001 PHP 5.4.3 Development Server started 
at Saturday May 26 13:07:59 2012 


Go to local hosbS&SS in your web browser, and 
voila: insta nt se r ver for the cu r rent d I rectory. 
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REGULAR EXPRESSIONS WITH THE /X FLAG 


While some of us truly enjoy regular expressions, 
we ll hold our hands up and admit that they certainly 
are n’t for everyone. 

But many times, you'll find yourself noticing that the 
intricate sequence you wrote months ago, might as well 
be a load of Incomprehensible gibberish now. 

The /x flag can come In very useful In these situations. 
Think of it as a way to embed comments into a regular 
expression, for future reference 

Consider, for example the following simple regular 
expression. For the purposes of this example it verifies a 
U5 phone number 

001 preg_match( 

002 V(1:\d{3})?- ?\d{ 3 }- \d [4 }/' p 

003 $n umber 

004 ); 

While we may currently understand each section of 
the regular expression in a year's time, we may have 


DON’T SPLIT HAIRS 

It only takes a relatively swift Google search to 
uncover countless articles related to PUP 
performance. What's rather unfortunate is, that the 
huge majority of these articles are largely misinformed, 
or focus on 'performance boosts' - which are 
insignificant to an extreme. 

Consider the popular single quotes vs double quotes' 
debate For those unfamiliar with this, the basic 
argument is that, because PUP doesn’t have to parse 
single quotes, in search of embedded variables, it's 
better tor performance, and a more acceptable 
standard to - when possible - always use single quotes 
instead of doubles 


no clue as to what certain parts of the code actually 
mean; like the ?: at the beginning (if designates a non¬ 
matching group, by the way). 

Let's instead use the fx flag to inform our future 
selves, and save contusion. 

001 preg_match( 

002 V 

003 (?;\d{3»? # The area code. code can 

be optional 

004 -?\d{3} # The prefix 

005 -?\d{4} # The line number 

006 /x\ 

007 inumber 

008 ); 

This is admittedly a simple example, but it serves as a 
good illustration to help you imagine the benefits the /x 
flag can provide for when you want to implement more 
intricate regular expressions. 


001 $name = l Boh f ; 

002 echo 'Hi, $name J ; // Hi, $name 
003 echo “Hi, $name”; // Hi, Bob 

Not only is this not true, but It takes the concept of 
pre-optimisation to an extreme. Any article that states 
otherwise is providing a poor service, and is harming 
the PHP community (particularly the newcomers) 
more than helping it Instead, invest your performance 
tuning into database query bottlenecks, and on the 
frontend - concatenating assets, and reducing the size 
of your Images. 


A A SOME PROJECTS 
DON’T WARRANT 
THE USE OF A 
PREPROCESSOR) 7 

CSS VARIABLES 
WITH PHP 

These days, most designers take advantage of a 
CSS preprocessor, such as LESS or Sass. However 
there are some cases when a smaller project doesn't 
necessarily warrant a preprocessor, though you still 
might like to leverage the power of variables. 

Well, if we're clever, we can do this very thing with 
plain-old PHR First let's review the basic concept 
Consider the following file, 'style.php', which contains 
a list of PHP variables and CSS; 

001 <?php 

002 header(“Content-type: text/Cas- charset: 
UTF-r); 

Variables 

001 Ipriraary = ' red r ; 

002 1 > 

003 .container { 

004 iriargin; 0; 

005 padding: 20px; 

006 colon <?= Sprimary; ?>; 

007 } 

Believe it or not if you reference this little file here in 
your HTML: 

001 clink rel=”stylesheet” href=”style,php ”> 

It will work! However, there are some considerable 
downsides to this approach if used in production. 
Most notably because we're using PH R the file never 
has the chance to be cached (at least not without a 
bit of trickery). Instead, a better solution is to use this 
technique for development, and then convert the tile 
to CSS for production. This conversion can be done 
from the command line. 

001 php style,php > style,css 

The command above will execute the PHR and 
export the output to a tile, called 'styfe.css'. With this 
technique, you're able to leverage the power of 
variables (and PHR), while still ultimately outputting a 
static stylesheet tor production. 
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20 PHP TOP TIPS 


JOKE OF THE DAY 

To display a joke, store a list of jokes in an array. 


001 dijckes = [ 

002 'Why did the chicken cross the rcad?| 
I To get to the other side,’, 

003 ‘What is ErnieVs favorite ice 

I cream? Sure-Bert, r * 

004 ‘etc. 1 
005 ]; 


As we want a new joke with each page load, we 
ra ndomly select an ite m from the a rra y„ a nd echo 
ft within a blockquote. 


001 <hl>Joke Of The Day</hl> 

002 <bloekquGte> 

003 <?= SjokesE rand(l, count(Sjokes) ]; 

l?> 

004 </blockquote> 


EMBRACE MODERN FRAMEWORKS 


It's easy to fall into the rut of always resorting to 
WordPress. Why not Consider using a modern PHP 
framework, such as FuelPHP or Laravel? 

Consider creating a users table. In Laravel, rather than 
building some SQL string, we can harness the power 
and flexibility of migrations. Using Laravel’s command 
line tool, artisan, we can build the necessary skeleton to 
create and tfrqp the users table 


The Labile can now be created by executing: 

001 php artisan migrate 

And your table has been created! The power of 
migrations Is chat we can easily rollback these changes: 

001 php artisan migrate:rollback 


001 php artisan migrate:make create_users 

This code will generate a CreateJJsers migration along 
with two methods up and down. We can leverage the 
helpful Schema class to build our table without having 
to nest nasty SQL into our PHP Here’s an example: 

001 class Create_Users { 

002 /* Create the table, */ 

003 public function upQ 

004 C 

005 Schema::createQusers' * 

fu netion($table) { 

006 $table->increment$('id'); 

00 7 $tab1e~>str i ng('u sername”); 

008 Stab1e->string(‘password*); 

009 ttable->string C‘email'); 

010 Stable->timestampsO; 

011 }}; 


How the table has been deleted This is just one 
example of the po wer a modem framework like La ravel 
can provide. 


CLOSURES 

JavaScript users have enjoyed the power of 

closures for years. Luckily, we now have them in 
PHP. as of version 53. If the term closure sounds 
scary, just think of it as an anonymous function. 

M ost immediately, you can imagine using them as 
callback functions, similar to what you might be used 
to in jQuery. Here’s a WordPiress example: 

001 addL,actionC‘ : publish_post r , function() { 
002 // send email to subscribers 

003 }); 


Additionally, closures can be assigned to variables. 


012 DG::table('u sers 1 )->inse rt{$new_ 

user); 

013 } 

014 /* Revert the changes to the database, 

*/ 

015 public function downQ 

016 { 

017 Schema::drop('users 1 ); 

018 } 

019 } 


001 Sname = f unc tion(} { 

002 return ‘Douglas Qua id 1 ; 

003 

004 SnameO; // Douglas Qua id 

Even better, a closure can inherit values from its 
parent's scope via the use keyword, 

Please note that, as of PHP version 5,4, within a 
closure, the Sthis keyword will still refer to the current 
class Instance. 


BLADE TEMPLATING 

Need another reason to consider La ravel? Enter 
Blade templating. Most frameworks offer some 
form of templating solution, but Blade ranks among 
the best. We all hate the process of creating forms.: 
well Blade steps in to make the task considerably 
less groan-worthy, 

Blade allows you to use beautiful, unobtrusive 
syntax for writing PHP control structures and 
echoing daLa. 

Rather than embedding <?php ?>, we can instead 
use a curly brace notation: ft 11 Here's an example: 

001 ?{{ For*: ;openCtask/5\ ‘PUT) » 

002 <ul> 

003 <li> 

004 {{ Form:rlabel('title', 'Title') 

» 

005 {{ Form::text( J title 1 ) }} 

006 </li> 

007 <li> 

008 {{ Form:: label( H message 1 r 

‘ Message) }} 

009 {{ Form::text(‘message') }} 

010 </li> 

011 <li> {{ Form::submit(‘Update Task! 1 ) 

}} </l i> 

012 </ul> 

013 {{ Form: rclose() }} 


JUMP TO 
THE CLOUD 

It's quite possible that your standard 
deployment process consists of opening 
an FTP program such as Transmit, and 
dragging the updated folder over to your 
server. Clearly, this is not a practice that Is 
ideal; what if you make a mistake, and need 
to roll back to the point before you 
uploaded those files? There isn't an easy 
way to accomplish this with the drag and 
drop method alone. 

Instead, a better solution Is to store your 
app In the cloud, and use Git-based 
deployment. Consider using a platform 
such as PHP Fog or Pagoda Box, which 
provide fast and scalable hosting for your 
PHP projects and applications. 

With this method, deploying your 
project can one hundred per cent be 
accomplished from the command line. 
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CREATE THUMBNAILS 

The GO library, though cumbersome to work with, 
can provide a great deal of power when it comes to 
manipulating images. For instance., to create a 
thumbnail dynamically we can follow a few steps: 

First we use the I mag ec reatef romjp eg function to 
bad the image from the file system. Next we use 
getlmageslze to determine the width and height This 
function wll return an array, which contains a variety of 
information about the image, including the dimensions, 
and file type. In our case,, we only need the dimensions, 
so well use the 1st function to store the first two items in 
the array within the $x and $y variables, respectively, 

001 Ssource - 4 webdesigner.jpg'; 

002 Soriginal = imagecreatefronnjpeg($source); 
003 list($x f $y) = getimagesize{Isource); 

Next, specify the desired dimensions for the thumbnail: 

001 $desired„width = 200; 

002 $desired_height = $y / { $x / SdesirecL 
width ); 

We've set a width of 20G. and are using just a bit of math 
to calculate what the $y value should proportionally be. 
Now. were ready to begin generating the thumbnail 
using the imagecreatetruecolor function. 

001 $thumb - imagecreatetruecolor($desired_widt 
h* $desired_height; 


This will set the wrapper for the thumbnail. Next, we 
will copy the original image that we modified into this 
$thumb destination. 

001 // dest, original image, dest_x, dest_x r 
src_K, src_y, dest_w n dest_h P src_w, src_h 
002 imagecopyresaiipled($thunib J ^original, 0 r @ f 
&, 0„ $desired_width ± $desired_height k lx> Sy); 

Yes, by the way, this function is a bit ridiculous, Don't 
worry; none of us can remember the order foe the 
arguments, Mostly were specifying which portion of the 
original image to copy fthe whole thing, in our case), as 
well as the dimensions of the destination and source 
Images. 

The final step is to set the content type header, and 
output the image to the browser. 

001 header(“Content-type: image/jpeg"); 

002 imagejpeg($thimb); 

Alternatively, If you’d Instead prefer to write the thumbnail 
to a file, rattier than render it on the screen, you can pass 
a file name as the second argument for imagefpeg. 

001 imagejpeg($thimb, 1 image-thumb, jpg’) ; 

Clearly this Is a simple, procedural Implementation. You'll 
likely want to abstract this functionality away to a flexible 
arid reusab le class. 



001 git add , # add all changed files to the 
I stage 

002 git commit -m f Added about page' # commit| 
| the changes 

003 git push origin master # push the 
changes to PHPFog 


Using just these three simple commands (which 
can be shortened even further with aliases), we r ve 
now leveraged the power of version control with 
Git, and have pushed the latest modifications up to 
scratch, to PHP Fog, 

Next, referring back to the rollback question 
that I proposed earlier, should we need to undo 


001 git reset HEAD* —hard 
002 it push origin -f 


his snippet will reset your code base to the state 
lat it was in before the commit, and then force a 
ushto PHPFog, 

In a modern development world, version 
ontrol and Git deployment Is the standard. 


1 


USE XDEBUG 

For when you need more debugging power, consider 
using the fantastic PHP extension, Xdebug. 

Xdebug provides full stack errors, profiling, and code 
coverage analysis, While you can get it from xdebug. 
org, it's likely you already have il on your system. 

To -do so, open your php.ini file, search for '[xdebug] 1 , 
and uncomment the aend.extension line below it by 
deleting the semicolon at the beginning of the line. 

If you don't know where your phpilni file is stored, 
open Terminal and run php -i I grep 'Loaded 
Configuration File*. This will output the path to the file. 

Next, you'll also want to enable HTML errors as well. 
Search for 'html_errors', and change the value to On. 
Lastly restart Apache, and youVe good to go! 








Improved debugging with Xdebug 


FINDING FILES 
WITH GLOBO 

With the glob function you can search a directory 
for a certain set of files. Let’s hunt down all JPEGs, 

001 Sfilfis = globC*. IPS'); 

002 print_r{$files); 

The snippet above will output: 

001 Array 
002 { 

003 [0] => image.jpg 

004 [I] => people.jpg 

005 [2] s> photo.jpg 

006 ) 

That's helpful, but what about images with the JPEG 
and PNG extensions? To capture those files as well, 
we can use the GLOB_BRACE flag. 

001 Ifiles = glob( 1 *.{ jpg,jpeg,png}\ GLGB_ 
BRACE); 

002 print_r($files); 

Now, were captuning all images - or at least files, 
which have extensions of PNG, JPG, and JPEG. 

001 Array 
002 { 

003 £0] => image.jpg 

004 [1] => people,jpg 

005 [2J => photo, jpg 

006 [3] => city, jpeg 

007 ) 

For one las: glob Up. i'you want to return the full paLti 
to the captured files, we can do so quite easily: 

001 Ifiles = glob('*,(jpg,jpeg,png)', GLQB_ 
BRACE); 

002 Ifiles - array_map( f realpath’ , Ifiles); 
003 print_r{Ifiles); 

VWiich outputs: 

001 Array 
002 { 

003 [0] => /Applications/MAMP/htdocs/ 

project/image, jpg 

004 [I] -> /Applications/MAMP/htdocs/ 

project/people.jpg 

005 [2] /Applications/MAMP/htdocs/ 

project/photo,jpg 

006 [3] => /Applications/MAMP/htdocs/ 

project/city.jpeg 
007 ) 
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Create a cross-platform app 
using the Mojito framework 

Discover how to code an app with Yahoo!’s 
fresh new JavaScript framework, designed to 
work fluidly on any device. Page 86 


Build web apps with 
Node.js & Geddy 

Simon Bisson explores the popular Node.js 
framework Geddy and builds on the DNS 
server list app created last issue. Page 90 
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Google Maps is the de facto standard for online maps. Here we look 
at how to customise the Google API to match your brand and site 





Matt Gifford 

Matt Gifford is a lead Rl A 
consultant developer and industry 
author from Cambridge, who 
specialises In ColdFusion, mobile 
and iront’end development and 
can claim over ten years of 
| industry experience across 
various sectors. 


C artography, the process of making and 
studying maps, has been around for 
millennia. It Is a subtle combination of art 
aesthetics, science, and design, and a 
process that allows us to chart, record and 
share data in an easy to read format. 

From the earliest cave paintings 
depicting social gatherings and small 
communities, to larger, more detailed 
cartographic creations of the stars In the 
sky and the evolving shape of the Earth as 
was perceived throughout history even to the humble 
London A-Z possibly lost in the back of a glove bo<x in a 
oar the art of map making and reading is one that is still 
very much alive and of importance to us today, 
Although there are a number of mapping services 
available online, Google Maps seems to have surfaced 
as the top selection due to It's ease of use. dear layout 


and aesthetic design. Readability is of crucial importance 
- we want to consume data and information easily, so it 
needs to be Incredibly simple to digest and understand. 
The Google Maps interface is dean, concise and 
relatively clutter-free and the rendered maps are 
instantly recognisable and simple to process. Perhaps 
the familiar feel and design of the information provides 
some comfort to its many users and Implemented? 

As a web professional, one of the service's greatest 
features Is the fact that through an Incredibly detailed 
and extensive API. It Is available to use on our own sites, 
applications arid web projects in almost any way we see 
fit We can create a truly customised experience for our 
users with a tool that many use and feel safe with. 

From CMS plug-ins to bespoke implementations, 
Google Maps is used throughout the World Wide Web, 
and only your Imagination can stop you creating some 
unique applications using the openly available service. 


BO. 
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STARTING OFF 

To start off, let’s answer one simple question first: How 
easy te It to Implement a Google Ma ps Interface Into my 
existing website? 

Chances are most if not all of us have been to the 
mein Google Maps page ( maps.gooqlejcom } at some 
point in our lives - whether it was to check directions 
between a number of locations find points of interest in 
specific geographical areas, or to explore the world with 
the Street View features and see If you could spot weird 
and wondrous mom^its of public life captured by the 
roving Google team. 

With all of the exciting things to experience and 
explore using the service, you may or may not have 
noticed the existence of a 'Link’ button to the left hand 
side of the map (represented by a graphic of a small 
chain link?. It can easily be overlooked with so much 
information to look at and take in. but it holds the key to 
quickly and easily adding the Google Maps features to 
your websites. 

Clicking on the Link button, the user will then be 
presented with a small overlay window, which will 
provide you with a direct link or Frame HTML code to 
the exact location currently visible in the larger mapping 
window directly beneath the overlay. The link is ideal for 
sharing a saved location with anyone over IM, in ari 
email or anywhere else. The generated HTML consists 
of an Frame with default width height and other style 
attributes, which will open up the same Ink to the 
currently visible map location. This in Itself provides the 
answer to our Initial question of ease of use and 
implementation - you can simply copy and paste the 
provided HTML code into your web application and. 
barring any specific styles you may wish to add for 
positioning and aesthetics to fit into your site, you now 
have a Google Maps feature. 

We can actually take this a little further and customise 
the map somewhat to add some basic Individuality to 
the Frame markup. Directly bellow the HTML text field, 
you will see a link to 'Customize and preview embedded 
map', Clicking this, a new window will appear to allow 
you to tweak the dimensions of the map. You can 


choose from three predefined sizes (small, medium and 
large accordingly), or opt to enter a custom size, which 
will allow you to enter specific width and height 
dimensions. Any changes made in this window will 
update the map to provide you with an instant preview 
of how it will look. The updated HTML code is available 
to copy and paste into your website, iff and when you are 
happy with you r changes 

So, Just how easy can It be? Essentially, you are no 
more than a few quick clicks away from obtaining the 
basic code you need Co include a Google Maps location 
on your site 

DOING IT YOURSELF 

One of the greatest features of Google Maps as a 
product Is the API (Application Programming Interface), 
which provides developers and web professionals with 
the ability to create truly custom mapping applications 
and interfaces. 

When storting with the API, you literally start with a 
blank canvas. Once you include any reference to the 
Google Maps API JavaScript file or URL endpoint within 
your HTML document you have the freedom to create 
a map of any size and scale, and display a level of 
information that is right for you and your needs. 

GET SOME STYLE 

The Google Maps interface is instantly recognisable the 
clear layout, the icons used to set a marker to any 
locations, the distinctive default colour palette. All of 


these things and many more act as confirmation at a 
glance that you are using a Google Maps map. 

While this Is reassuring to some extent, heavy 
importance lies on being able to differentiate your 
brand, your site, or your application's use of mapping 
interfaces from everyone else who uses the popular API. 
Familiarity is good, but creatively we strive to stand out 
from those around us. 

One of the new features available in the latest API Is 
Styled Maps. With a little extra code added to your map 
initialisation code, you can customise the base map 
layers to match your brand requirement^ draw attention 
to your plotted data or markers, or to simply remove any 
features of the map you do not want to show. 

The possibilities for customisation using styles are 
numerous, but a distinctly visible change you can make 
Is to alter the colour scheme of the map and its various 
elements. This does not need to stop at changing the 
road featureType colours to bright pink or blue in fact 
the Google Maps API has many sub-categories for each 
individual featureType, all of which can have specific 
styles applied to them or removed from display 
altogether. The choice is yours. 

STREET VIEW 

Viewing geographic data using the mapping interface is 
one thing, but truly being able to 'step into the map' 
provides another user experience altogether, and one 
that can be used to great effect to help create something 
memorable for your site’s users. 
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An interactive 3D game using maps a s the board? An exdting use of the latest technologies from Google them selves 


k k ONLY YOUR 
IMAGINATION CAN 
STOP YOU CREATING 
SOME UNIQUE 
APPLICATIONS USING 
THIS SERVICE* V 
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DRAGGABLE 

ROUTES 

MONITOR ANY CHANGES MADE BY THE USER 
TO THE GENERATED ROUTING DIRECTIONS 
WITH AN EVENT LISTENER 


1 001 var directionsDisplay - new google.mapsJ 
002 DirectionsRenderer({draggable: true}); 
003 var map = new google.maps. Hap(document. 
004 getE lemen tBy Id { “mep_ca nvas") ); 

005 directionsDisplgy.5etMap(map); _ 


DISPLAY DIRECTIONS 

To begin rendering rooting and directions we need 
to create a new DirectionsRenderer object. We also 
want to set the polyline to allow draggable 
interactions, A pply the ma p to a d ocu ment element, 
and then set the direction renderer to the map. 


|00i googl e. maps. eve nt. 

002 addLis tener(direc tionsDisplay , 

003 ‘di ructions_changed J , function0 { 

004 cal culat eDistance (d i rectionsDi splay. 

005 directions); 

lees » ; _ 


SETTING THE EVENT LISTENER 

When instantiating or initialising the map object 
and any related properties, we can include a 
number of event I isteners to exec ute when certain 
aspects have been altered. If the user changes the 
directions using the drag-and-drop interaction, 
the calculateDistanceO function will run. 


1 001 function calculateDistance(result) { 
002 var totalDistance = 0; 

003 var myroute — result.routesE®}; 

004 for (i = 0; i < myroute. legs.length; 

ir> { 

005 totalDistance += myroute.legs[i]. 

005 distance.value; 

007 } 

008 totalDistance = totalDistance / 1000. 
009 document. 

getElemen tBy Id ( “ tota IDi stance”). i nn e rHTM. = 
totalDistance + “ km"; 

eig > _ 


CALCULATE DISTANCE 

Once the event has been recognised, the 
calculateDistance method will execute. We have 
passed through the directions from the 
DirectionsRenderer object as a parameter, which 
lets us loop through and increment the value of 
the updated distance, which we show by updating 
the desired HTML element with the value. 
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ABOVE I Don't constrain yourself to geographic^ I locations. The Kn ife-Edge Scan ill ng M kroscope B rain Atlas lets you explore brain 
scans using Google Maps software 

k k STREET VIEW ALLOWS YOU TO DIVE IN 
AND TREAD THE CITIES, TOWNS AND 
HAMLETS IN A 360 DEGREE PANORAMA » 7 


Not only does the Street View functionality allow you 
to dive in and tread the cities, towns and hamlets in a 
360 degree panoramic view of all areas covered by the 
Google Maps application, you can also set specific 
options to Lailor and customise your real-world map 
views Loyour liking 

We have the ability to intercept and monitor Street 
View events if any changes are made to the state of the 
panorama. These can Include detecting if the Street 
View is switched off or on, or If the geographical location 
of the panorama changes as the user continues on their 
virtual Journey within your application. 

00 1 google. maps.event.add Lis tene r(pa norama t 
002 c po5ition_changed r r function() { 

003 console,log('the position has changed, 

004 do something amazing here 1 ); 

005 )); 

Typically, location markers are used in the standard map 
interface to easily pilot and visualise locations. These can 
also be used in Street View as the native display of map 
overlays is also supported in panoramic views. This 
could be used to set dear pointers for public transport 
favourite venues or clearly Identifiable locations for a 
chain of shops, for example that will persist on the map 


stage if a user switches their view from the default map 
type into Street View. 

ROUTING 

A map is a mapi and one of its core purposes as to assist 
the inquisitive, the lost or those wishing to plan journeys. 

If you are including a Google Maps interface within 
your application, displaying your location to a user is 
very helpful. You can improve your user’s experience 
and help them to find you and your services by giving 
them the ability to use your map to generate routing 
and directions from their specific location to your offices, 
shops, business or favourite coffee place. 

The Google Maps API can really help you transform 
your standard mapping interface into something that 
can be used to generate and return directions and 
routing options. 

Obtaining a request for directions from point A to 
point B Is relatively simple. 

001 var directionsService = new google.maps. 

00 2 Directions Service (}; 

003 var directionsDisplay = new google,maps, 

004 DirectionsRenderer(); 

005 var request = { 

006 origin: w St Albans, UK”, 
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007 destination: “Cambridge,. UK J % 

008 waypoints: [ 

009 { 

010 location Ives, Cambridgeshi re f UK" „ 
011 stopover:false 
012 } 

013 1, 

014 providefiwteAlternatives: false, 

015 travel Mode: TravelMode,DRIVING, 

016 unitSystern: Unit System.IMPERIAL 

017 }; 

018 direc tionsSe rvice.route(request, 

019 function(result, status) { 

020 if (status == google,maps. 

DirectionsStatus, 



<coumiQnt> 

What our 
experts think 
of We Site 


Invaluable for integration 

Google Maps has become am invaluable tool in web development over the 
past couple of years. It allows me to provide a wide scope of options: from 
basic 'find us here' type dynamic maps on contact pages, to custem- 
skinned Twitter mash-up tools and complex location and direction-based 
tie-in services for Word Press and Joomla. 

The API and the scope of integration that it offers is extensive - with 
enough research and knowledge there is very little map-based that it wont 
allow you to do. The flipside of that is that its also exhaustive it is large, 
complex, and takes some time to familiarise yourself with. 

Fortunately most of my client needs fall into the more basic category but 
it is certainly a piece of web tech that it is well worth spending the time to 
become familiar with. 


QK) { 

021 directionsDisplay. 

setDirections(result ); 

022 1 
023 }); 

In the previous code sample, we set a new request 
object containing our origin and destination locations. 
Including a single waypoint for the Journey. We also set 
the mode of travel arid were able Co define the system of 
units used to calculate the distance. 


John Kavanagh 


When a direction request is made, an 
asynchronous call os made to the API 
and the resuits from the request 
are passed into the callback j 
function in the form of a I 
DlrecttonsResult object and a 1 
DlrectonStaius response code. ’ 
The information returned in the 
DireotionsResult object allow us to 


GETTING - 
API ACCESS 

To access the API, you will 
need an API key from code 
aoo a le.com/a ois/co nsol e. 
This console will also give 
you access the other 
exposed APIs within the 
Google product stack. 


f 


ly generate the direction results to the 
user, assuming a route was successfully 
returned - we can easily validate this 
against the DirectionStatus value. 

To output the returned directions, 
we pass the results Into the 
DlrectibnsRenderer object, which can 
handle not only the display of the 
polylines to visualise the routing options 
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The Google Maps API Is not only 
applicable to the 'traditional' web. With 
the continued surge in mobile 
browsing and location-aware apps 
using the device's geolocation 
capabilities, Google Maps can easily 
be used within your native mobile 
applications with minimal fuss. If 
you're using a service like PhoneGap 
to create apps, you won't even have to 
^ change your HTML code. 


available, but also the display of any returned textual 
directors as a step-by-step series of directions. 

We can further extend the Interaction for the user by 
allowing them to modify their route by setting an option 
to make it draggable When this has been implemented, 
the user can setect any point on the rendered result and 
move it to a new location. This will dynamically update 
the map routing to display the altered path. 

We can also make use of the Distance Matrix service 
to compute the travel distance and Journey duration 
between supplied locations. Using this feature in 
conjunction with the routing requests will add an extra 
level of interaction for the user and help create a viable 
route-planning tool. 

FINALLY... 

The Google Maps API provides a lot of In-depth 
functionality that can help you create a customised 
mapping tool or interface for your users. You can choose 
which Of any) of the customisation features you 'want to 
include to generate an implementation of the familiar 
map user interface, and to build something specific to 
your needs and requirements. However you choose to 
use It take some time to Investigate the available 
features and new updates, and explore the possibilities 
to help make your map stand out. from the rest. 
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ABOVE : Tbyuta made use erf the Street View API to create their own 
360 degree panoramic views of locations submitted by customers 


kk HOWEVER YOU CHOOSE TO USE GOOGLE 
MAPS, TAKE SOME TIME TO INVESTIGATE THE 
AVAILABLE FEATURES AND NEW UPDATES » 


IICIMfJ TUC niCTAMPC IWIATDIV provide additional routing information to 
UolliU I riL UlO IMIiUl IVIttl nlA users such as estimated journey times 


The Google Map API contains the Distance Matrix 
service, which can be used to compute travel 
distance and journey times between multiple routes 
using a given mode of travel. This works beautifully 
in conjunction with the Directions Service (which 
returns detailed route information), as well as 
standing up effectively on it's own. 

Accessing the service is relatively straight forward, 
as we can see here: 


©01 var origin = new google.maps, 
LatLng(51.75153, -0.333S92); 

002 var destination = “London, England"; 
003 var service = new google,maps. 

004 D istancehatri xSe rvice(); 

005 service. getDistanceHatrix( 

006 { 


007 origins: [origin] f 

008 destinations: [destination], 

009 travelMode: google,maps.TravelMode. 

DRIVING, 

010 avoidHighways: true 

011 }, callback); 

012 function callback(response, status) { 
013 // Process the response here 
014 ] 


Once the Distance Matrix service is instantiated, we 
pass the specific routing information into a particular 
method, getDistanceMatrixO- This contains at least 
one origin 3rd one distance, although multiple values 
can be sent through. It s useful to note you can send In 
these details as a specific Google Map co-ordinate 
object or as a textual reference to a location. Finally, 


we s pecify a ca 11 bac k meth od to process the returned 
response, within which we can calculate the duration 
and distance of our suggested route, 
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What our 
expats think 
the site 


Maps is both creative and flexible 

When developing solutions that require mapping elements, the 
Google Maps API is always a strong candidate. 

The ability to get creative with features such as overlays and layers, 
and the great deal of flexibility and control over the Ul r mean that the 
potential extends far beyond simple marker placement or routing. 
Using the Street View or Google Earth APIs gives the ability to tie 
engaging developments to locations familiar to users, instantly 
transporting them into the midst of the experience. 

With mobile now being a default consideration for most new 
developments, Google Maps has been designed to load quickly 
respond to touch-based interactions and is suitable for use in both 
native and web-based applications through the JavaScript API and 
native SDKs. The Static Maps API can also help serve static images to 
devices where an interactive map is less appropriate, 

Sally Jen kin son 



ABOVE: Twitter Nano uses the 
Google Maps interface to search tor a 
location, and then queries the Twitter 
API for messages sent from that area 
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STYLING YOUR MAP 

MAKE USE OF THE NEW FEATURES IN THE API 
TO CHANGETHE COLOUR SCHEME AND 
DISPLAYTO SUIT YOUR BRAND 


001 var myOptions = { 

002 een ter : new google.maps.Lat Lng(0,0 ) t 
003 zoom: 2 ± 

004 mapTypeld; google,maps.MapTypeId.ROADMAP 
005 }; 

006 var map = new google.maps.Map( 

007 document.getElementByld("nap_canvas”), 
006 myQptions 

009 >; 


INITIALISE MAP 

Here we create a custom set of options for use in 
the initial view of the map, setting a specific zoom 
level, map type and central location. We build and 
initialise our Google Map implementation, and 
pass In the options defined previously. The map 
wl 11 be displayed I n the ma p_canvas div e lement. 


001 

vaf myStyles 

- C 

002 

{ 


003 

featgreType: 

"all”, 

004 

stylers; [ 


005 

{ visibility; 

H off 1 } 

006 

1 


007 

}, 


008 

{ 


009 

featyreType; 

"road”, 

010 

stylers; [ 


011 

{ hue; “#ffO023” }, 

012 

{ saturation; 

40 }, 

013 

{ visibility: 

'on' } 

014 

1 


015 

} 


016 

3; 



CREATE STYLTS 

Next we start to create any custom styles we wish 
to include in the map. This is a simple JavaScript 
array that contains separate objects for each style 
we wish to apply to the final layout. Here, we turn 
off all features by default, and reintroduce all roads 
with ana Itered cdou r style. 


001 map. setQptions ({styles; my Styles}); 


APPLY STYLES 

Finally, we need to apply ou r custom styles to ou r 
predefined map interface. This could be done 
during the map constrnotion, Put In this exampie 
we are goi ng to pass our style array object and 
use the setOptions method to apply these updates 
directly to our map. 
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| Create an app using Yahoo! s new Mojito framewo rk 


Create an app 
using Yahooi’s 
new Mojito 
framework 

Code a cross-platform app with 
Yahoo!s fresh and minty framework 

tools I lech I trends JavaScript Mustachejs. Mojito, Node.js. currently, 
Miojito will only run on *mix systems ttxiwrt Kieron Howard 



eve topers have become used to a 
wide gap in coding dynamically for 
the fnontend in JavaScript, and 
then using a language like PHP or 
.NET for the backend. What if it 
could be done with one language? 
Mojito aims to blur the boundaries 
between the front and backend by 
allowing the whole app to be 
written in JavaScript Mojito has set its goals high, and in 
the future the team behind it hope to allow the app to 
choose whether to serve and then render on the client, 
to render on the server, or a mixture of both. For 
instance, render the first page on the device, then 
subsequent pages are fed JSGIM feeds to populate it 
in the first of this two-part tutorial we'll look at how 
Mojito works and how to get a server up and running. 
We will also look at the MVC design pattern that Mojito 
uses. MVC separates out business logic (dealing with 
data persistence and retrieval) with views (the rendering 
of the page the user sees) and the controller (the 
go-between that processes requests and responses). 


Install Node.js 

First off you will need to Install the JavaScript server Node.js. Go to 
www.nodeis.org and, depending on your platform, follow the installation 
instructions. Once it's installed it might be a good idea to run the 'Hello World' 
example to make sure all is running smoothly. 

02 M ° iitD 

Open up a new terminal window and enter In each line belcw followed 
by Enter, Thi swill install Mojito using NPM (or Node Package Manager). If the 
install fails, then you may have to use sudo before the command eg sudo 
curl httpj/npmis.orQ/insLall.sh sh. 

001 $ curl http: //npmjs.org/install.sh | sh 
002 $ npm install mojito -g 

03 Test the installation 

Once the installation has completed, you can test it using the code 
below, again, enter this in terminal, if all goes well then you should see a series 
of tests most should pass but its normal if some fail. Once all is well, we are 
ready to start building our application. 

001 $ mojito test 

Hello World 

To get a basic understanding of how Mojito works, lets make a 
standard 'Hello World' app before we move on. Mojito apps are created using 
the code below. You should then see the success message. Open up the 
containing directory to see the structure. 

001 mojito create app hello_world 

Create Mojit 

Back in terminal, change to the app directory using the cd command, 
and then we will create our first Mojit. Mojits are what make up your 


application, with each Mojit having a separate controller to define what the 
Mojit does, and a view element to define what the Mojit looks like to the user. 

001 cd hello_world 
002 

003 mojito create mojit helloMojit 

Edit controller 

In your favourite editor, open up the 'co ntr o 11 e r.serve r.j s' file within the 
Mojit directory you just created. You will notice it contains around 50 lines of 
code already. This is the default index action for your Mojit. Before we study it 
some more, lets see Mojito in action, so go back to your terminal window. 

Start Mojito 

To start the Mojito server, make sure you are in your HelloJVorld 
project folder and then enter the command below. You should then see the 
'Mojito started he!io_world' on http://)ocalhosL:8666 l message. If you get any 
errors, double check you are in the correct folder to request the Mojito start 
command. Open up a new browser window. 

001 $ mojito start 

Hello World 

n the add ress bar enter httpy/local host;8666A§>hel loMojst/index - 
You should be greeted with the message below. To explain, we make a 
request to our Mojito sever which is running on port 8666 on localhost. We 
then direct the request to our helloMojit controller and our index method 
within the controller. Additional methods can be added to the helloMojit 
controller to perform more complex tasks. 

001 status 

002 Mojito is working, 

003 data 
004 sane: data 
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The helloMojit view 

Our controller takes our request to index and then returns the 
associated view and data, Open the Index,mu.htmi' file within the 
■■ ■ :>Moj t>views drccto^y in you-editor Mo to uses Mustache as its 
templating engine. Mustache is logitless, meaning there are no'if' or 'else' 
statements, or ways of manipulating any data that gets passed to it. 

Mustache.js 

Mot being able to apply any logic to your views directly forces you to 
separate out your code, making it easier to maintain and debug. Taking a look 
at your index.mu.html file - you'll see a table, with some text Mustache uses ft 
)) to signify a variable. Note the 'status' var which relates to the one passed 
from our index method in our controller. 

©01 {{ ^Variable }} 

©02 

©03 {{anotherVariable)} 

Add new variable 

To demonstrate, lets add another sample variable to our controller, 
then pass it to our template. In controller.server.is. add in 'nmyvar: This is rriy 
variable' to line 40. and then in index.mu.html add {{myvar}} just inside the first 
div. Save both these files and then head back to the terminal window where 
the server is running, 

©01 index: function(ac) { 

©02 ac.models.helloMojitModelFoo.getData(function(err, data) { 

©03 if (err) { 

©04 at. error ( err ); 

©05 return; 

©06 } 

©07 ac, assets, addCssC ./index, css 1 }; 

©00 ac.done({ 

©09 status: 'Mojito is working.' h 


01© data: data, 

011 myvar; 'This is rny variable' 

012 »; 

013 }) ; 

014 } 

Restart server 

As we've made a cha nge to our code, we now need to restart the 
server: Use Ctrl+C to stop it, and then 'mojito start' to fire it up again. The Mojito 
server is quite verbose, and gives plenty of info by default on what requests 
are made to it, as well as what its responses are, 

001 hold 'Ctrl’ and 4 c’ to stop server/ 

002 £ mojito start 

Assets 

Assets such as CSS files or ether JavaScript files are not included in the 
template as with some frameworks, but referenced from within toe controller. 
In our example here, we a re including the 'helloMojit/assets/indexcss' file 
within our intJex template, using this line 

001 ac.assets.addCss( J ./index.css'); 

Adding new routes 

Adding a new route is a simple case of inserting another method 
within the controller. For this example we will just replace the value of our 
myvar variable to show the principle. Race this code beneath the index action, 
not forgetting to add in a semicolon after the closing brace. 

001 myroute: function(ac) { 

002 ec,models.he1lcMo jitModelFoo,getDgta{function(e rr r 

data) {{ 

003 if (err) { 

004 ac. error (er r); 
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ddS 

dm 

ddl 

008 

009 

010 

011 


return; 

} 

ac. assets. addCssf ' . /index, css’); 
ac.done({ 

rtlyvar: 'Fantastic!' 

»; 

}); 


Insert new view 

Now to coincide with our new myroute method, we need an 
associated view tile. Create a new HTML file called 'myroute.muhtml' and 
place it in the heHoMoJlt>views directory. Add the code below, save the file and 
then be sore to restart the server. 

001 This is my new route and method: {{ myvar}} 


Test the view 

In your browser enter httpc//localhost:8666/@helloMoJit/myraute 
and you should see displayed the value you entered in your new variable. 
Using what we have learned, we can now start to link parts of our app 
together using the other part of the M VC pattern, the model. 

The model (1) 

The model part of our application deals with retrieving and persisting 



data from our chosen storage method, such as Mongo or MySQL, it is easiest 
in Mojito to use RESTfui APIs that return J5GN, and to process that. As Mojito 
was written by Yahoo!, using YQL is incredibly easy. Lets use the Yelp API to 
import some local restaurants to our app. 

model.server,js 

Rename your modeas/foo.server.is to 'model.server.js', and then add in 
the following code. This code creates a search method which makes a call to 
the Yelp API to return Sushi restaurants in San Francisco using YQL. which is 
Yahoo!'$ own Query language. 

001 Vlir.addC 'helloMojitModel" , function(Y) { 

002 

003 Y . moj i to. model s. yelp = { 

004 init: functiQn(config) { 

005 this.config - config; 

006 }, 

007 getData: function(callback) { 

008 callback({some:‘data'}}; 

009 }, 

010 

011 search: function (search f start f count, callback) { 

012 if (null = search || 0 — search.length) { 

013 callback([]); 

014 } 

015 

016 start /= 1; count /= 1; 

017 var select = 'select * frcm local.search where 
query^'sushi' 1 and location=' J san franeisco, ca 1 ' 1 ; 

The model (2) 

In the second part of our model we then process our results. The 
results are added to a Results array which we will use in our controller to pass 
onto the view. The results array consists of the id of the JSON node, the title 


001 

V.VQL (select, function(rawYql) { 

002 


003 

if (null == rawYql | | Q == rawYql.query.count) { 

004 

callback ([]); 

005 

} 

006 


007 

var results = □ , item = null; 

008 


009 


010 

for (var i=0; i < rawYql.query.count; i++) { 

011 


012 

item = rawYql. query. resul ts.Result [i]j 

013 


014 

results.push ( 

015 

( 

016 

id: item.id. 

017 

title: item.Title, 

018 

add ress: item.Add ress 

019 

} 

020 

): 

021 

} 

022 

callback (results); 

023 

1); 

024 

} 

025 }; 


026 }, 

'fl.0.1 1 , { requires: ['yql']}); 


The controller (1) 

We now need to edit our helloMojit controller. Replace its contents with 
the code below. This index action checks whether the results has a url 


(name) of the restaurant, and the address. To see the structure of the returned 
JSON in your browser you can enter: tinvurl.com/72fvacr 


property, and if not applies one. as well as a default. We also pass through the 
amount of results and the page (default '!) ready tor pagination later on. 
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001 YUI,add('helloMojit' r function (Y) { 

002 

00 3 Y. mojito.controller = £ 

004 init: function (config) { 

005 this.config = cofifig; 

006 }, 

007 index; function(ac) { 

008 

009 if (ac,params,hasQwnProperty( J url j ) ){ 

010 var q =ac.params,url('q') I | 'default* * 

011 page = (ac. params mrl(‘page h ) || 0) /l* 

012 count = (ac. pa rams. url( 'size') II 20 ) /l; 

013 }else{ 

014 var q =ac,params,getFromUrl('q') || 'default', 

015 page = (ac. pa rams, get Fromllrl('page') II 0) / 1, 

016 count = (ac.params.getFrdnUrl('count') II 20) / 1; 

017 1 

Controller (2) 

The second part defines otir model (the one we just crested), 
then calls It with the parameters we just set. The results are then 
passed on to the view with a callback, along with the page, count, and 
star ting point. These values can be used for pagination within the view. 


001 var start - page * count; 

002 var model = ac, modeIs.yelp; 

003 model. search (q, start, count, function(results) 

{ 

004 ac.done ( 

005 1 

006 results; results, 

007 pager page, 

008 count: count, 

009 start; start 

010 > 

011 ); 

012 

013 }); 

014 } 

015 }; 

016 1, '0.0.1 J r {requires: []}); 


Showing the results 

Open up the views>index.mu.html file and then replace it with 
the code below. Now open up a browser and go to http:// 
local host:8666/@heilolMoj it/index. In your terminal window where you 
have started Mojito, you should see the server processing the request 
and response, and after a few seconds, the result should be displayed 
right there in the browser, 


001 <div id= J, £{mojit_view_id}}'' class-'mojito 
002 <ul class= l 'tile Jh > 

003 {{#results}} 

004 <p> 

005 Restaurant:{{title}} 

006 Address:{{address}} 

007 </p> 

008 {{/results}} 

009 </ul> 

010 </div> 



Code library 

The Mojito controller 

A look at what makes up arguably the most important part of a Mojito 
Mojit, the controller 


Firstly, the MojiMs 
registered with the YUI 
add method, All Mo jit 
controllers must have a 
unique name, 


The index action Is Used 
as thedefault event for 
the controller when the 
Index page Is visited. 


This lsthe call to our 
model, which requests 
the data from the Yelp 
APTwepasslnthe 
number of results, 
starting page and query 
string. 


The results of our query 
a re then passed to our 
associated view (index. 
mu.html> in arrays with 
cor responding names. 


001 YllbaddChelloMojit ', function(Y) { 

002 

003 Y.no,]ito.controller s { 

004 init: function(config) { 

005 this.config = eonfig; 

006 }, 

007 index; function(ac) { 

008 

009 i f (ac, pa rams. hastwnP rope rty ( J u cl 1 )) { 

010 var q =ac.params.url('q') |I 

‘default', 

011 page = (ac, pa rams. url('page') || 0) 

/l, 

012 count = (ac,params r url('size') II 20) 

/l; 

013 )else{ 

014 var q "ae.param5.getFrdnUrl( J q') ] | 

'default', 

015 page - (ac. params, 

getFromllrl('page') || 0) / 1, 

016 count = (ac.params. 

getFrcmtlr!('count') || 20) / 1; 

017 } 

018 var start = page * count; 

019 var model - ac,models,yelp; 

020 model,search (q, start, count, 

function(results) { 

021 ac.done ( 

022 { 

023 results: results, 

024 page: page., 

025 count: count, 

026 start: start 

027 } 

028 ); 

029 }); 

030 } 

031 }; 

032 }, '0,0,1', {requires: □}); 
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Complex DNS 
servers with 
Geddy 

In our second Node.js tutorial from 
Simon Bisson, were looking at 
building web applications using the 
Geddy framework 

tools I teelt I trawl* Node.js, Geddy, Text editor export Simon Bisson 



M VC frameworks simplify 
separating design and code, 
and make it easier to port apps 
between back-end storage 
architectures. Using an MVC 
framework means application 
structures are created 
automatically, rediudng the 
code you need to write. That's important with an 
event-driven framework like Node.js. as the framework, 
handles building the routes and the central switch - 
letting you concentrate code for specific functions. 

Node.js Is a way of constructing functional blocks of 
network code that can be used to handle services and 
operations that don't need to be pari of a server. With a 
focus on input/output and on network services, Node.js 
code can also be used to construct a network of 
connected program elements that can be deployed 
across all your servers, making apps more responsive. 

We're using Geddy to construct a more complex 
version of last month's DNS server list application that 
handles input, and displays a list of recent searches. 


Installing Geddy 

Last month we built a local test environment for our Node.js 
application development. We can use that existing environment to build our 
new application. Create a directory for your DNS server application, and then 
install the Geddy tools. You'll also need to add Jake, a JavaScript equivalent of 
the Rails build tool Rake. Use the NPM package manager to handle the install. 

001 >npm install -g jake geddy 

Building an application framework 

Once we've installed Geddy we can use it to build our application 
frame work. Geddy. like Ruby on Rails, will automatically put much of the code 
we need in place, with code to handle the look and feel of our application, and 
code where we can add business logic and local storage tor our files. 

CGI >geddy app dnslookup_app 

A quick test 

We can now test our code. Change directory to your application 
directory and launch Geddy. it will start up in debugging mode, so you'll see 
debugging information on your console as resources are loaded and used. 
The application Itself runs on port 4000. so view http://localhost:4000 in your 
browser, If everything is working you'll be presented with a welcome screen. 

001 >cd dns.app 
002 >geddy 

Adding resources 

We can now start to customise the generated code for our DNS 
application. We'll first need to create the appropriate resources using Geddy. 
Shut down Geddy and on the command line type the following command, 
This will create basic routes for our application, ready to customise further, 

001 >geddy resource dnslockup 


Inside the Geddy code 

The code that is generated by Geddy goes Into the controllers, model 
and view folders that are located in your app directory. In controllers, open the 
file 'dnslookups.js' so you can see the routes that have been created. These 
routes will enable you to create, edit and remove the various application 
elements - which is pretty much ail you need for the framework of a basic 
web application. 

001 var Dnslookups = function Q { 

002 this,responds^! th = ['html', 'jsorO, ‘xml 1 , 'js r P ‘txt J ]; 
003 

004 this.index = function (req P resp, params) { 

005 this, respond ({params: params}); 

006 y t 
007 

008 this. add = function (req, resp, params) { 

009 this, res pond ({params: params}); 

010 }; 

011 

012 this,create = function (req., resp P params) { 

013 // Save the resource, then display index page 

014 this, redirect ({controller: this*name}); 

015 }; 

016 

017 this,show = function (req, resp, params) { 

018 this.respond({params: params}); 

019 h 
020 

021 this.edit = function (req, resp r params) { 

022 this.respond({params: params}); 

023 }; 

024 

025 this.update = function (req., resp, params) { 

026 // Save the resource t then display the item page 
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027 this, redirect ({controller ■ this, name, id: params.id}) ■ 
028 >; 

029 

030 this.remove = function (req h resp f params) { 

031 this.respond({params: params}); 

032 }; 

033 
034 }■ 

035 

036 exports, Drislookups = Dnslookups; 

Adding a model (1) 

While the code we have runs, it really doesn't do anything much. For 
that we need to start building the data model for our DNS server. First we 
need to decide just what goes into a shopping list - a folly qualified domain 
name and an IP address. Next we go to the 'dns.Js' file in the models folder 
and open it up, 

001 var Dnslookup = function () { 

002 }f 

003 Dnslookup = geddy.model.register( J Dnslookup r , Dnslookup); 

Adding a model (2) 

Now we need to add code to handle the structure of a DNS lookup, in 
the function block of the model we need to add three new property 
definitions for the model, using a this.defineProperties construction for item, 
number and store. To keep things relatively simple, they're ail strings, and 
they're all required. 

001 this.defineProperties({ 

002 fqdn; {type; 'string', required; true} 

003 r address; {type; 'string 1 ', required: true} 

004 , id: (type: string', required: true} 

005 }); 


Validate me! 

One of the more useful features in Geddy is the ability to validate that 
values are present and are of the right format We can add a handful of 
validators to our code, to ensure that items are present. Validators can be 
functions in their own light, so we could have one that ensures the fully 
qualified domain name input is of the right format. 

001 this. val idatesP resent{ fqd n) ; 

Storing the data 

It's relatively easy to hook Node.js land Geddy] up to many of the more 
common web'friendly databases like MongoDB or MySQL However, that's not 
really necessary for a simple DNS server - and we can just use memory to 
hold our results. Of course the results will be lost if we turn off the server" In 
the 'iniljs' file for the app.add the following global array: 

001 geddy, dnslookups = [J; 

Adding a model adapter CD 

We now need to create a model adapter This is the code used to 
connect to a data source - in this case, the array we just created. We'll need to 
create a new model adapters directory in our application's lib folder, with a 
dnslookup-js file that contains the adapter code, starting with the following 
code stub; 

001 var Dnslookup = new (function () { 

002 )) 0 ; 

003 exports.Dnslookup ■ Dnslookup; 

Adding a model adapter (2) 

New that we have a dare-bones model adapter in place, well need to 
make sure that it's loaded when our application starts. That means adding 
more code to its init.js file, to create the appropriate objects and to load the 
model adapter. It's just a couple of lines of JavaScript 
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001 geddy.model,adapter = {}; 

002 geddy.inode 1.adapter.Dnslookup = require(process.cwdQ + ’/ 

1 i b/nodel_adapte rs / 

003 dnslookup r ) , Dnslookup; 

Adding a save method 

The framework for our application is now in place, so we can start to 
add the logic that handles how it operates. First we need some code that will 
save the data to the dnslookup array we created earlier. We can do this Say 
adding a save method to the model adapter, setting saved to true and adding 
the result to the dnslookup array. 

001 this.save = function (dnslookup) { 

002 dnslookup,saved - true; 

00 3 geddy.dn slookups. push (d nslookup); 

004 }; 

Editing a Geddy function (1) 

Next we need to change the default create action in our controller 
Open the dns.js file in the app>controJlers directory. You'll see it contains the 
following auto-generated code forthis.create, set up when we created the app 
resources using Geddy. The code currently redirects back to the controller, 
doing nothing. 

001 this,create = function (req, resp, params) { 

002 // Save the resource, then display index page 

003 this.redirect({controller; this.name}); 

004 }; 


Editing a Geddy function (2) 

The code we need to add is relatively simple. It creates a new instance 
of the data model, populating it with the values from a form we will be 
creating in the next step, it the values pass validation, then we save them in 
the array, otherwise we go back to the add form, including an error parameter 
to show that the use made a mistake. 

001 this.create = function (req f resp, params) { 

002 var dns = geddy.model.Dns.create({fqdns: params.fqdns, id: 
geddy.string.uuid( 10) , address: ' '}); 

003 if (dns.isValidQ) { 

004 dns.save(); 

005 this,redirect({ controller; this.name}); 

006 } else { 

007 this, redirect({controller: this,name, action: 

'add?error=true J }); 

008 } 

009 }; 

Templates in Geddy 

Like Express. Geddy handles HTML content Py using templates. Unlike 
Express, which uses Jade’s templating language, Geddy uses a mix of the 
familiar in the shape of HTML and its own inline JavaScript, using a very 
A5P-l»ke syntax. It s an approach that's quick to team, and easy to customise. In 
views/dns, open 'addhtmlejs'. 

001 <div class=' J hero-unit Jh > 

002 <h3>Params</h3> 
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■ You can find additional information on -Gtiddyat its. home page, a long 
with links to the source on GltHub 


Getting JSON for free 

The Geddy framework doesn't just 
give you HTML outputs - it also 
creates a set of JSON and JSONP 
APIs in parallel. You can see this in 
your code by opening ydnslookups. 
jsonl You’ll find more details of 
how Geddy handles JSON, and 
how to use it in the Geddy 
documentation, 
at geddyjs.org. 


003 <ul> 

004 for (var p in params) { %> 

005 <lix%= p + ' : f + params[p]; %x/li> 

006 <% } K> 

007 <7ul> 

008 </div> 

Editing the template 

As Geddy uses HTML for its forms, we can easily take the boilerplate 
code and use it as the basis of a simple HTML form that lets us submit a 
domain name to our query (a lot easier for a user than using a query string). 
Note the inline JavaScript we can use to handle any input errors. 


011 <input type= r 'submit 1 ' classF''btn btn-primary r '> 

012 </form> 

013 </div> 

Getting a list (1) 

Now that we are starting to build an array of domain names, we need a 
way of showing them to the world, We first need to edit our controller to 
extract Lhe information we need, Open the control!ers^dns.js file and look for 
the section that handies the index action. We need to edit it to work with our 
DNS service: 

001 this. index = function (req r resp, params) { 

002 this, respond ({dnslookups:. geddy.dnslookups}); 

003 }; 


Editing the index view 

The r index.html.ejs' view now needs to be edited to create a link to the 
add view we created earlier, along with a list of the DNS queries our service 
has handled. We can do that with a button link, and a loop that extracts the 
appropriate values from the drts array we use to store results. 


001 <div class^'hercrunit'^ 

002 <h2>DNS lookup</h2> 

003 o hrefs "/dnslookups/add" class-'btn pul l-right fJ >C reate a 
new DNS query</a> 

004 </div> 

005 

006 <% if (dnslookups,length) £ %> 

007 <% for (var i in dnslookups) { &> 

00B <div class =l, row dnslQokup-iteni'> 

003 <div class- h spanfT> 

010 <h3> 

011 <a h ref = "/dnslookups/^ dnslookups [i].id; &>''><&= 

dnslookups[ij.fqdn; *%X/a> 

012 <m> 

013 </div> 

014 

015 <div class- lf span4 f '> 

016 <h3> 

017 <i class=''icon-list-alt if x/ix%= dnslookups [i]. 

address; %> 

018 </h3> 

019 </div> 

020 </div> 

021 

022 

023 <% } ^> 


001 <div class="hero-unif 1 '> 

002 <h2>Enter a domain name:</h2> 

003 <form actLon= ,, /dnslookups' f ijtethod="P09T"> 

004 if (params. error) ( 

005 var fqdn = 'Enter a fully qualified domain 

name here' 

006 } else { 

007 var fqdn = 'Enter domain name' 

008 } 

009 3> 

010 cinput type-'text' 1 cl ass= "spanS” placeholder- h <%^ fqdn %> r 
name= J 'fqdn JI > 


Adding a load method CD 

We now need to add a load method to our model adapter in order to 
extract a result from the array that stores the results. Open the dnslookupjs 
file in model_adapters, and add a call back method to extract the result we 
want, and pass it back to the calling function. 

001 this.load = function (id, callback) { 

002 for (var i in geddy.dnslookups) { 

003 if (geddy,dnslookups [i],id = id) { 

004 return callback(geddy,dnslookups [i]); 

005 1 

006 } 
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m 7 callback({»; 

008 }; 


Adding a load method (2) 

Well next need to add a call from our controller to use 
the load method, making part of the applications show action. 
Open the controlier>dnsloofeups.js file and add code that will 
load the data we want and deliver it to the show template, 
where we can render the data. Load statements can be a bit 
more complex than this - working with databases or 
application code. 

001 this.show = function (req, resp, params) { 

002 var self = this; 

003 geddy . node 1, adapter . Dnslookup.load (pa rams r id , 

f u net ion (dn slooku p){ 

004 self. respond({dnslookup: dnslookup}); 

005 }) ; 

006 }; 

Showing the results 

Now we've got our data from the array, we can show it 
in more detail by editing the show template, ‘show.html.ejs'. For 
a more complex application, this can contain calls to other 
data methods, letting us use it to add exlra information, 
updating records - or even deleting records that are simply 
no longer needed. 

001 <div clas5= M he rerun if f > 

002 <h3x%- dnslookup, title; %x/h3> 

003 <jdiv cla5s= J, pull-righf p > 

004 <&= dnslookup.id; *x/p> 

005 C4= dnslookup.address; %> 

006 </div> 

007 </div> 

Adding the DNS lookup 

Finally we can add the code to handle the DM5 lookup. 
We'll use the code from last month’s tutorial as a basis, adding 
it to the save method we created earlier. Open the model, 
adapter and edit the save action, adding the DN5 lookup code 
arid saving the result as 'dnslookup.address'. 


001 this.save = function (dnslookup) { 

002 

003 var dns = required dns 1 ); 

004 dns.lookup(dns lookup.fqdn , f unc tion ( e r r , 

result) { 

005 if (err) { 

006 con sole . log(err , toStr i ng( ) ) ; 

007 return; 

008 } 

009 //con sole. log ( resu It . toSt r i ngQ ) ; 

010 dnslookup.address = result, toSt ring Q; 

011 / /con sole. log(dn s value. toStringQ); 

012 }); 

013 

014 dnslookup.saved = true; 

015 geddy . d ns1ookups.pus h(dnslookup) ♦ 

016 }; 


Code library 

dnslookups.js 

The heart of our application - dnslookups.js - contains 
the routes used by our Node js code 


thlsLindexis the route for 
the tnain page in atl 
application. It hands 
over the content to a 
template for display. 


thlStcreate Is used to 
handle input and 
storage. It creates and 
saves the array element 
used to hold query 
results. 


this.show loads the 
contents of the 
dnslookup array, using a 
call to the model adapter, 
before displaying the 
array contents using a 
template, 


You can see we haven't 
used all the available 
routes - these can be used 
to extend the application 
with ways of modifying 
stored data. 


001 var Dnslookups = function {) { 

002 this.responds^ith = [ 'html' , p json f , 
'xml', p js J f 'txt J ]; 

003 

004 this.index = function (req, resp, params) 

{ 

005 this.respond({dnslookups: geddy. 
dnslookups}) ; 

006 }; 

007 this.add 1 = function (req r resp, params) { 
008 this.respond({params: params}); 

009 }; 

010 this.create - function (req r resp r 
params) { 

011 var dnslookup = geddy,model.Dnslookup. 
create {{f qdn: params,fqdn, id: geddy .string. 
uuid(10), address: ''}); 

012 //consol e.log (address. toString()) ; 

013 if (dnslookup.isValid ()) { 

014 dnslooku p. save (); 

015 this. redirect({controller: this, 

name}); 

016 } else { 

017 this, redirect ((controller: this.name, 

action: 'add?error-true f »; 

018 } 

019 }; 

020 this.show = function (req, nesp, params) 

{ 

021 var self = this; 

022 geddy.model.adapter.Dnslookup. 
load(params. id, function (dnslookup)! 

023 self. res pond ({dns lookup: dnslookup}); 

024 }); 

025 }■ 

026 this.edit = function (req, nesp r params) 

{ 

027 this.respond((params: params}); 

028 }; 

029 

030 this. update = function (req f resp f 
params) { 

031 // Save the resource, then display the 

item page 

032 this,redirect ({controller; this,name, 

id: params. id}); 

033 }; 

034 

035 this.remove = function (req, resp, 
params) { 

036 this,respond({params: params}}; 

037 }; 

038 }* 

039 exports.Dnsiookups = Dnsiookups; 
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Championing the talents of 


Jeff Witters 

web www.cartisien.com 



Current role Freelance UX j Ul creative director 
Education Fast Carolina University. BA(Hons) Commu nicaion 
Arts 1999 - 2002 

Expertise Photoshop. Illustrator. Flash. After Effects. Cinema 4D, 
HTML CSS. creative direction, user Interface design, 
user experience design 

Clients Fox. Fox Searchlight, Miramax, DreamWorks, 

Universal. Nintendo, Microsoft. Many's. Saatchi & 
Saatchl. Warner Brothers. Llonsgate, FX Networks, 
Deutschancl MGM! 

Twitter @s#errt? 


Jeff Witters is the creative force behind the 
Venice H CaIifornia based boutique interactive 
shop that isCartisien Interactive. He has over 
ten years of experience crafting award¬ 
winning work for clients like Fox, Lionsgate, 
Miramax, Universal and many others. Although 
he cut his teeth as a print designer, Jeff spends 
his days designing specialised useNnterfaces 
that help set his clients' brand experiences 
apart. Within his career, his work has touched 
almost every comer of the interactive design 
worldj brand identity, international campaigns, 
site experiences, social activation, gaming, 
video production, mobile apps and sites to 
name just a few. 

During college. Flash was still a timeline 
animation tool and Director was the preferred 
interactive tool- Lingo was the language end 
Photoshop was iust learning to walk. During 



01 www.lastkissmovie.com 


that time though. Witters was able to see the 
possibilities emerging from combining 
interactivity and traditional graphic design 
together, The mix of technology and art was 
the spark that decided his career, 

One of his largest Inspirations comes from 
the people he surrounds himself with - both 
the thinkers and the doers. Both of which are 
potential users of the work he produces. 
Listening to others' ideas, watching their 
interactions closely and the way that they 
communicate with their technology is the next 
step In evolution of Interactive design. 

Responsive design, Infographics, simplicity 
of navigation, sleek matte feeling Ul and an 
integrated user layer are the trends of this year 
and the near future. 

Awards for his work include two Webhy 
nominations, F WA, and a Davey Award, 



o; client mucKup 



wwwdQXacafchltglit.com/IJtUemis55unahtne2 



01 

The 'Coming of age' theme has 
very sentimental moments that 
are essential to this film. The 
intent was to capture those and 
build the UX around them. 


02 

Baseball is built on legends, 
memories and stories from the 
past, The site was designed to 
evoke memories of that golden 
age of the greats. 


03 

T he Lit t le Miss Sunshine site was 
completely dictated by the 
quirky nature of the film and its 
underlying theme; the Journey, 
not the destination. 


04 

The choice was made early on to 
push boundaries and tie directly 
into the consciousness of 
Coupland and represent him as 
the fabric of the site'. 


05 

To set this site spar t f rom many 
others a gimmick was required. 
Since the film centred on driving, 
that ended up being the navigation 
and animation style. 
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independent and job-hungry web designers portfolio 


Morten Strid 

web www.mortenstrid.no 



Current role I nteracti ve a rt director at MeoLab 
Education 3D Design & Animation, M ultimedia Systems (Monash 
University) 

Expertise Desiga Programming AS3/HTMUCSS/JavaScript. 
Motion Graphics. 3D. compositing. 

Clients NRK. Frfele. Oslo City: BKK. Rleber & San, Bergen Art 
Museum 

Twitter @mortenstrld 


Morten Strid is an award winning Interactive 
art director from Norway who grew up in 
Ardal. before heading to Bergen where he 
completed studies in 3D Design & Animation 
and Webmaster. He then spent a year at 
Monash University in Melbourne, where he 
studied the BA Multimedia Systems course. 

Today, Strid has seven years of working 
experience In the advertising Industry, having 
worked the last three at NeoLab. his current 
employer. NeoLab is a ‘uH-service advertising 
agency located in Bergen, and is considered 
one of the top agencies in the city. 

Strid's previous work history includes new 
media artist at JIBE Republic and Noroff, 
where he held lectures in the 3D and 
Multimedia courses. 


Versatility Is Strid's biggest strength. Having 
skills In design, programming, motion graphics, 
compositing and 3D makes him a useful asset 
to his employers, both in a pitch situation and 
production. His favourite part of the project 
pipeline is the start-up, where ideas and 
concepts are created. 

Strid is an excellent designer, and his work 
has picked up quite a few awards. He spends a 
lot of time exploring new technologies and 
trends, and he doesn't mind working crazy 
hours in order to deliver a quality product. 

When it comes to finding inspiration, he 
finds it in pretly much everything, not only the 
web and advertising. He feels sick If he hasn't 
had a workout for two days, and firmly believes 
that a healthy body gives a healthy mind. 
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01 

Strid s personal portfolio features 
a selection of projects he has 
done over the years. - l wanted 
something simplistic, but 
eye-catching too.' 


02 

A campaign site for Friete Instant 
Coffee where the actor reads 
poems based on user input. J A 
stage setting was chosen, mixed 
with a Twin Peaks feel." 


03 

An interactive movie experience 
starring you and David 
Hasselhoff. A light grungy style 
was chosen, mixed with big 
icons and buttons for usability. 


04 

Jaeger is a Norwegian BMW and 
MI Nl d ealershlp. T he chal lenge 
was to create a responsive 
design while keeping within 
Jaeger corporate guidelines.' 


05 

Grpnnevikspren is a real-estate 
project m Bergen. This micro-site 
was made bo inform tenants about 
the facilities. "The web design was 
built around the 3D models." 
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Thursday. 21 July 2011 


email design 


Digital Mazey Design 

web www.digitalmazeydesiqn.co.uk 



Current role Digital & print designer 
Education BACHons) Photography, Foundation Art S Design 
Expertise HTML, CS5, Photoshop, Dreamweaver, InDesign, logo 
design, email marketing, brand design, typography 
and web design. 

Clients WHS, Arena Magazine, Freshfietcls Bruckhaus 
Deringer, The Songmen. 

Twitter @digitalmazey 


At 26 years-old, web, logo, and print designer 
Sophie Lewis (AKA Digital Mazey) already 
has eight years of experience in the design 
industry. Graduating with a foundation in Art 
& Design from the University of Gloucestershire 
and a degree in Photography & Digital Imaging 
from Nottingham, her style really evolved 
when she made the move to London. While 
there she gained roles working for creative 
agency Rankin; picture editing and shoot 
production for men’s fashion magazine Arena; 
and worked alongside some of the most 
promising artists and photographers at some 
of London's top illustrative, photographic, and 
sporting agencies. 

But why web design? The decision was 
made when Lewis was working on a Marina & 
the Diamonds photo shoot. The photographer 
and designer were determined to make the 


shot and layout look amazing. This drive for 
perfection rubbed off on Lewis and. coupled 
with her love of the internet, made her move 
to web design a completely natural 
progression. 

Now based in Cheltenham., Sophie runs her 
own agency - Digital Mazey Design - where 
the pursuit of perfection continues. In her 
spare time, Sophie can be found sourcing 
Inspiration from Bribbble, Web Design Ledger, 
and of course Web Designer 

To date. Sophie has had her work featured 
by companies such as the BBC, HMV. the NHS. 
and has been commissioned to design CD 
covers for various artists in the music industry. 
Later this year, Digital Mazey Design will be 
launching her own font range. Keep an 
eye out for new designs: www. 
d ig i ta I m azey d es ig n. blog spot.com. 
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Recently updated DMDagency 
website using a feature image 
library to showcase her portfolio 
Indudes a news-letter sigrvup 
feeding to a MySQL database. 


02 

The dynamic design allowed 
healthcare professionals to 
gather more information about 
the Linking Leaders event in an 
interesting and dynamic way. 


03 

Magic Circle law firm event 
invitation, which includes a 
dynamic map for recipients to 
plan routes and IR$VP for 
maximum responses. 


04 

Current web design project. 
Single page layout using smooth 
scrolling anchor points to get 
from one area to the next 
without having to wait for reload. 


05 

Events website with simple 
navigation for members to upload 
and distribute adverts. The design 
is bold with large call to action 
areas for use on mobile devices. 
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The only magazine you need to design and develop stunning websites 

Subscribe now 

Online 


Order by visiting: 

www.imaginesubs.co.uk/wed 

and enter USA5 to get this exclusive offer! 

Telephone 

Order by phone, just call: 

+ 44 ( 0)1795592878 

and quote USAS 







TERMS & CONDITIONS 

*This is a US subscription offer; please don't forget to quote USAS 
when ordering. You will actually be charged £60 sterling for an annual 
subscription. This is equivalent to $94 at the time of writing, although 
the exchange rate may vary; Seven free issues refers to the newsstand 
price of $14.99 for 13 issues tota lling $194.87 compared with $94 for a 
subscription. Your subscription will start from the next available issue. 
Latest offer is based on newsstand price of $14.99 per issue compared 
with $723through this offer 
This Offer expires 30 September 2012. 
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In Copenhagen, the small 
capital city of Denmark, you 
can see beautiful historical 
buildings and modern 
architectural structures 
standing side-lay-side. All these 
buildings create a very cosy 
and romantic atmosphere. 


WITH GREAT 
MUSTACHE 

COMESUBEAT 


winning ‘VM Bjerget' - an apartment 
building where the roof on each apartment 
is another apartment's garden. 

The Opera House Is another world-class 
architectonic. WiLh its dean lines, it has 
become one of the greatest tourist 
attractions, especially in the evening where 
the light gives an amazingly beautiful 
reflection in the water If you, on the other 
hand, are more Interested in art galleries or 
the big art museums, there are several 
options for you to choose from. Furthermore, 
you only have to take a walk up the sma 
streets of Copenhagen and you will find 
amazing gable wall paintings and beautiful 
ornamentations on the buildings. South of 
Copenhagen you find J Arken Museum' which 
offers interesting discoveries within modern 
arL As you may have realised by now. 


Mustache 

www.mustache.dk 
Mustache is a digital agency, which since Its 
inception in 2006, has seen the digital 
world as one big creative playground. It 
strives to be at the cutting edge of the latest 


Copenhagen is a city with endless 
opportunities and experiences, and you only 
have to take a walk around the city to 
experience all the beautiful and amazing 
architecture and art 



technology, so it can always offer the customer 
the best solution across the newest media. 
Mustache offers offer a range of services from 
analysis, strategy, ideas and concepts to design 
and technical implementation. 


PROGR 
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Creuna 

www.creyna.com 

A leading digital agency 
that helps customers 
and clients realise their full 
potential through digital 
communications.Creuna is a full 
service digital agency with a 
unique multidisciplinary 
business concept and a leading 
position in Scandinavia. It covers 
everything from thought to 
action in digital communications. 









Daman 

www.damaiLdk 

Da ma n is a d ig ital ag ency that s pec i a lises I n servi ng t he 
pharmaceutical and healthcare Industry. It offers a wide 
range of services from consultancy and advice, to design and 
implementation, to a full online media strategy. The agency prides 
itself on being professional yet approachable and friendly. 



Spoiled Milk 

QnnilpHmilL rik 


f 

Spoiled Milk is a forward-thinking 
company with a multicultural 
team working from locations in Zurich, 
Belgrade and London - as well as 


Copenhagen, it is quick to embrace new 
ideas and technologies, to remain at the 
forefront of the industry. As a full-service 
digital bureau.Spoiled Milk provides you 


with everything needed to implement 
your on line strategy. 





Hello Monday 

www. h el lom ondav. 
com 


Hello Monday i s a ta tented 
creative agency with offices in 
Copenhagen, New York and Aarhus. 


It specialises in creating visual 
experiences across digital and 
ana tog ue media, working with some 
of the world s best-known brands. 


The team say, "Look at our work, 
that's what's really important." 




The Bakken 
amusement park is 
one of the oldest in 
the world, opening 
its gates in 1583. 



A modern grocers with its own bakery and coffee 
roasting house; Emmerys is especially known for its 
excellent organic bread and delicious cakes. Visitors 
will find deluxe chocolate, organic apples, wines, 
pesto, tea, coffee, and many other top-quality goods. 


Cafe 22 is a charming and minimalist eatery that 
boasts an outdoor seating area overlooking a nearby 
lake. They serve alkday breakfast, sandwiches, salads, 
ta pas, soups and pasta, and are open into the early 
hours at the weekend. 


Christiania, the free city within the city of 
Copenhagen was founded in 1971. and many of the 
original settlers still live in the collectively controlled 
village. Take a visit and experience a beautiful, 
alternative way of life. 


trend map 


101 


















































































■uied 

designer Subscriptions Voucher 


YES! 1 would like to subscribe to Web Designer 

Your details 

Title_First name_ 

Surna me_ 

Address_ 


Postcode_Co u ntry_ 

Telephone number ____ 

Mobile number_ 

Email address._ 

Please complete your email address to receive news and special offers 

Direct Debit Payment 

UK Direct Debit payment 

1 would Ike to subscribe for only£25.IS every E Issues plus receive my free DVD. 



YOUR EXCLUSIVE READER PRICE 1 YEAR (13 ISSUES AND DVD) 

I - UK £62.30 (Save 20%) I Europe £70 I World £80 

Cheque 

I enclose a cheque for £_ 

(made payable to Imagine Publishing Ltd) 

Credit/Debit Card 

Visa I MasterCard I Amex I Maestro 

Card number Expiry date 

11111111111111111 11111 

Security number T 1 (last three digits on the strip at the back of the card) 

Issue number I 'I Of Maestro) 


Signed_ _ 

Date_ 

Code: PBG19S 

r Tick this box if you do not wish to receive any promotional material from Imagine Publishing Ltd. 

1“ Tick this box if you do not wish to receive promotional material from other companies. 

Teems and conditions apply. We publish 13 issues a year. Your subscription will start from the next avalable 
issue unless otherwse indicated. Otect Debit-guarantee details available on request This offer expires 
wtfhout notice. 

I would like my subscription to start from Issue; L_J_J 

Return th is order form to: 

Web Designer Subscriptions Department, 800 Guillat Avenue. 

Kent Science Park. Sittingbourne, ME9 3GU, or email it to 

webdesiqner@servlcelie Ipllne.co.wk 



FANTASTIC 

SUBSCRIBER 

OFFER 

Subscribe today and 
receive 21 issues 
absolutely free on disc 

Pay only £4.19 every issue - a 30% 
saving on the store price 
Free UK delivery to your door 

!■ Never miss an issue 

* 

Money-back guarantee 


*Terms & Conditions 

This offer entitles a 11 new U K a nd overseas su bscribers to receive 
21 issues of Weto Designer free (back Issues 116-136) on disc worth 
£9.99. UK DD subscribers will pay E25.15 every six issues. New 
subscriptions will start from the next available Issue. Offer code 
PBG198 must be quoted to receive this special subscription price. 
Details of the d I reel debit guarantee are available u pon request, 
Offer expires 3QUi September 2012. Imagine Publishing reserves 
the rig ht to lim it th Is type of offer to one per household. 

Sou rce code: PBG198 

Web address: www.irnaginffiubs.co.uk/wed 
Tel:0844848 8413 


Manage your subscription account online at wwwJmaqinesubs,aj.uk 












































SUBSCRIBE TODAY 



THREE EASY WAYS TO SUBSCRIBE 

1. Online 3. Post or email 


Order via credit or debit card, just visit: 

wvAW.imaginesubsxo.uk/wed 

and enter code PBG198 

2. Telephone 

Order by phone. Just call: 

08448488413 

Overseas: +44 (0) 1795 592 878 and quote code PBGI98 


3. Post or email 

Please complete the form and post it to: 

Web Designer Subscriptions, 

800 Guillat Avenue, 

Kent Science Park, 

Sittingbourne, ME9 8GU 

Alternatively, scan and email the form to: 

webdesigner@servicehelpline.co.uk 
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Our web-hosting guide is brought to you in association with 
Fasthosts, the UK's leading reseller web-hosting provider 
•Unlimited websites - Use your own brand throughout 

• Unlimited bandwidth * 24/7 expert UK-based support 

• Unlimited web space * No-risk trial - 3 months free 


I Hosting listings 




Whether you Ye a hosting firm keen to promote your 
products or a happy customer who wants a favourite 
provider to be listed, drop us a lire with the detailsl 

) webdesiqner@imaaine-publishing.co.uk 


NAME AND URL 


Keep an eye on the latest packages and 

deals with our comprehensive list of service providers 



1&1 


1 &1 Internet Ltd. 

www.landl.couk 


I6ri starter (Linux) 

1&1 Standard QJNjx) 
1&1 Standard (MS) 

1&1 Unlimited CLinuK) 
lfitl Unlimited AMS) 
ISri Business (Linux) 
lfitl Business CMS) 


0844 3351211 
0044 3351211 
OB44 33512 Tl 
0044 33512 n 
OB443351211 
08443351211 
OB4433512TI 


nasa 

£50.0* 

£71.08 

£83.0* 


5GB 

50GB 

50GB 

Unlimited 


£107.88 Unlimited 
£119-88 Unlimited 
£155.80 Unimited 


Unlimited 1,000 
Unlimited 3.000 
Unlimited 3,000 
Unlimited 5,000 
Unlimited 5,000 
Unlimited Unlimited 
Unlimited Unlimited 


* 

/ 
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/ 

X 


S 

/ 

J 
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/ 

/ 

/ 


s 

s 
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/ 

/ 
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/ 

/ 

/ 

/ 

/ 


/ 

J 

s 

s 

s 

/ 

/ 


lltWehHost crMn Unlimited Web Hosting Pack N/A 

y • u HOST ;J http://111wiebhost.com SteiterWebHpsfingPsck N/A 

DL^etWebHoSSrtgfe* N/A 
WcrdPressWeti Hasting Pack N/A 
DmpalW^PHostlrigPack N/A 
JoomlalWehHcstiingPack N/A 
ceGommerce Web Hosting feck N/A 
ZenCartWteb Hosting Pack N/A 
PrestaShopWebHos^gPack N/A 


£60 Unllnlted Urfcnited Unlimited 


£30 

£12 

£24 

£24 

£24 

£24 

£24 

£24 


5GB 

1GB 

5G0 

5GB 

5GB 

5GB 

5GB 

5GB 


2GB 
1GB 
2GB 
2GB 
2GB 
2GB 
2GB 
2 GB 


1QO 

5 

100 

100 

100 

100 

100 

100 


123-reg twww.l2J-reaco.uk) 
123-reg ( www.TZi-reQjco-uk) 



□ally Internet (www.dallv.OQUk) 

□ally Into net ( www.dally.LQ.uk) 

Daily Internet CwwwJtMymiJW 
□ally Intone! iwww.dally.CQ.uk) 
□esignwsisp (hi I p//d£Elqnw.'i5pxcim) 


Deslgnwasp(httD://deslgnwasiicQm) 


Starter 

Plus 

Pro 

Bus Pro 
Plui(MS) 
Pro (MS) 
fksProiOMS) 


oa-is Bsuocns 
0845 059.0018 
0045 0590018 
0045 0590018 
0345 0590018 
0845 0590018 
O845 0S9001S 


£1Q?8B 

£170.86 


SOB 

10GB 


5G8 

5DGB 

100GB 

UnMIled 

25GB 

50 GB 

IWGS 


20 

500 

750 

1,000. 

IDO 

500 

1.000 


Starter 

Heme 

Business 


08-151662100 
00454662100 
00454662100 
03454662100 
03445729348 
0844372 9848 
OEnuTigais 


£50.90 3GB 30GB 

£53.94 12GB 150GB 

£77.94 24GB 250GB 

£30 3GB 20GB 

£40 10GB 50*38 

£60 Unlinked Unlimited 


30 

600 

Unlknileri 

1,000 

10.000 

Unlimited 


2020Medla(«ww 202Omedia com) 

Light User 

08703212020 

£46 

20MB 

1GB 

3 

✓ 

y 

y 

y 

y 

y 

y 


ZO20Medla toww-ZOZOmedlajc-Diii) 

Ever^dav 

0B7O 321 2020 

£100 

200MB 

10GB 

15 

/ 

y 

/ 

y 

y 

y 

y 


HEDMedla (www 2020m edlac-oro) 

Busiress/Pro 

0870 321 2020 

E275 

500MB 

2DGB 

50 

/ 

y 

/ 

y 

y 

y 

y 


2Q2QMedla (wwwJ.020fnediajCCim) 

JAVA Tomcat 

C307O3212Q2O 

1300 

100MB 

3GB 

15 

y 

y 

y 

y 

y 

y 

y 


2020Med in (aww 302OiTiM:din cnm) 

ASPNa 

□370 321 2020 

£275 

100M8 

3GB 

15 

y 

y 

y 

y 

/ 

y 

y 


40 Data CrnLres twww.4dhnsl ingxnm) 

Bra rue Package 

□345 1663306 

£40 

10MB 

500MB 

2 

y 


y 

y 

y 

y 

y 


40 Data Centres Cwww 4dhgstinacom) 

Silver Package 

08451668306 

£64,99 

20MB 

2GB 

to 

y 


/ 

y 

y 

y 

y 


40 Data Centres (www4dhostlnn, com) 

Sold Package 

0845 1668306 

£79.99 

50MB 

2GB 

&0 

y 


y 

y 

y 

y 

y 


ID Data Centres I'www drthrretilnn jaunt 

11tanium Package 

0B45166BJB6 

E119.99 

500MB 

5GB 

500 

y 


y 

y 

y 

y 

y 

y 

4D Data Centres i www.4dhdstind.ccMn) 

Reseller Package 

□045 166 03B6 

£299.99 

1GB 

10GB 

1.000. 

y 


y 

y 

y 

y 

y 

y 

aiadtruot H&sting Ltd twwwAla.JirQQtcQ.ato 

Home 

N/A 

£40 

500MB 

5GB 

5 

y 

y 

y 

y 


y 

y 


Bladi(Qdt Hosting Ltd (www.blaclirQQtQd.ukt 

huineu 

N/A 

ISO 

1GB 

20GB 

100 

y 

y 

y 

y 


y 

y 


BJndkfanl Hnsling Ltd fwww.hlacl:fonLjcn.uk> 

EtonmeicE 

N/A 

£100 

2GB 

40GB 

200 

y 

y 

y 

y 


y 

y 


aiarttoot Hostirns Ltd (wwwWartfoc.tQDjiiiJ' 

ProlesslDnai 

N/A 

EEC 

3GB 

60GB 

300 

y 

y 

y 

y 


y 

y 


flucknlght (wwwJ>tacknk3tTLcwTi) 

Minimus 

35359 9183072 

£46 

10GB 

200GB 

Unlimited 

y 

y 

y 

y 

y 

y 

y 


BladKnlght ImimmMMnimJsam) 

Medius 

55359 9133072 

E79 

20GB 

100GB 

Unlimited 

y 

y 

y 

y 

y 

y 

y 


BiacKnlght (www.t3acknlgnt.com) 

Maximus 

35359 9133072 

£45 

JOGS 

600GB 

Unltnlled 

y 

y 

y 

y 

y 

y 

y 


Bravo14 (http://bravdl4.cd.uk} 

Starter Linux 

N/A 

£130 

2000MB 

2000MB 

10 

y 

y 

y 

y 


y 

y 

y 

3rnvn14 (hlL^/hr.a«a1.4jH,yk} 

Starter Wnkwvi 

N/A 

£20 

2000MB 

2000MB 

10 

y 

y 

y 

y 


y 

y 

y 


Bnaress UtlpM 

N/A 

£45 

4.000MB 

4,000MB 

4,000 

y 

y 

y 

y 


y 

y 

y 

BravQl4 !htLp://hrav □14xn.uk} 

EUjsmrii Window! 

N/A 

£45 

4,000MB 

4,000MB 

4,000 

y 

y 

y 

y 


y 

y 

y 

9rauQi4 (httpJ/bravon,co.uN} 

Ultimate Unux 

N/A 

£60 

Unlinked 

Unlimited 

Unlimited 

y 

y 

y 

y 


y 

y 

y 
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Get your listing highlighted! Contact Richard 
Q richardjnist@imagine-publishing.co.uk 
G +44(0)1202586436 hosting listings 


Featured host of the month: Blackfoot Hosting www.blackfoot.co.uk 



□eslpnwasp (t 
□esignwasp n 
□(■.signwasp (t 
Oigi' il Gihhon L 
Digital Gibbon L 
Digital Gibbon L 
oiaiiai Gibbon Lta ftiiinifflti^rnialitinnifTnn) 
□omaincheck t rtwwjilomalnmerk.eo.uk) 
DomaHehack f rtwwjfloiHalneteefceo.ukl 
DomaiKheck (aw JMnaincheck.cb.uk> 
□nmnichhck Cw >vw4g«n 3! n ^isEKiSg.:yK? 

Oonhost (www.donhtKt.c&uk) 

Donhost f www.donboaLca.uki 
□onbost fw ww .donboat.Lp.uh;j 
Donhost (v 
□nnhosE (has 



Offering more reasons for choosing one of the listed providers 


Blackfoot i&an experienced UK-based web-hosting provider 
with a proven pedigree In offering hosting and domain name 
registration services since 1999. Specialising in Linux-based 
servers, housed across three London data centres, Blackfoot promises 
24/7 monitoring and a dedicated support team to guarantee uptime 


and firsKlass delivery. Hosting options are available in five flavours 
ranging from the entry-level Home solution for £40 per year, up to 
the powerful eCommerce, Professional and Partner packages priced 
between £100-200. All come with access to the feature-packed cPanel 
control panel for intuitive maintenance. 



Windows Uiilmifed 
Window* Home 
OusipHnsL 
Perianal 
Personal Plus 
8u sinew 

Business Prcf esslonai 
Bronze Linus 
Gold Linus 
Bronze Window* 

Gold Window* 

ffesellerUnls 

reseller Windows 

Enterprise 

Commerce 

Designer 

□mrclnprr 

Starter 

Personal 

Evpert 

Virtual 

Bronze 

Silva- 

Gold 

Pl.nl inum 

Email Only 

Essential 

Superior 

Premium 

Starter 

Home 

Business 


Slacom (wrtw -nlar-nm com) 


0344372 BB48 
0344 372 9B48 
0944 372 904ft 
01965 5139 990 
01S65 SB9990 
01345 5B9990 
oiBtsseg ggo 

0191 261 2252 
0191 261 2252 
0191 261 2252 
0191 261 2252 
0S45 2265566 
0345 2265566 
0345 226.5566 
0345 226 5566 
0345 2265566 
0945 2265566 
09449994100 
0344 999 4HW 
0344 999 4*>0 
0344 999 4*K> 
0121 314 4365 
01213144365 
01213144365 
01213144965 
02390 249 923 
02380 249823 
023SD249 823 
02380 249 823 
Htfi. 

Hfk 

Hfk 

Hfk 

0300 542 7500 


EU 

£48 

£108 

£132 

£3Q 

£100 

£30 

£100 

£3-9999 

£499.99 

£39.99 

£179.99 

£119.99 


£23.39 

£59.33 

£95,88 

£227,30 

£30 

£42 

£72 

£114 

£40 

£75 

EHO 

£250 

E29.99 

154.99 

£79.99 

£159.99 

£199 


1GB 

Unlmiited 

5GB 

Unlimited 

ioomb 

500MB 

100MB 

500M9 

Unlenited 

Unlmiited 

1GB 


5GB 

5DGB 

200MB 

400MB 

800MB 

1.2DOMB 

1GB 

2GB 

5GB 

10GH 

500MB 

2.5GB 

6.5GB 

30GB 

100MB 


UnirmlKd 

50GB 

IOOMB 

Unlimited 

Unlimited 

Unlimited 

Unlimited 

1GB 

5GB 

1GB 

5GB 

Unlimited 

Unlimited 

2GB 

5GB 

2GB 

5GB 

25GB 

Unlimited 

Unlimited 

Unlimited 

2GB 

5GB 

10GB 

40GB 

2GB 

5GB 

10GH 

25GB 

1GB 

30GB 

Unlimited 

Unlknited 

2GB 


IMG 

Unlimited 


25 

Unlimited 

Unkmlted 

2S0 

500 

250 

500 


UnMmiled 

Unimilcd 



Personal Standard 

0844 503 0777 

£5380 

5GB 

Unlimited 

500 

S 


y 

y 

y 

y 

y 

X 

Business Standard 

0844 583 0777 

£95.88 

25GB 

Unlimited 

1£QQ 

S 

Optton 

y 

y 

y 

y 

y 

X 


Business Premium 

08445830777 

£173.88 

50GB 

Unlimited 

Unlimited 

y 

/ 

/ 

y 

y 

y 

y 

X 

Fast hosts 

WD Starter Reseller 

06445830777 

£149-99 

20GB 

Unlimited 

Unlimited 

y 

Option 

Option 

y 

y 

y 

y 

X 

www.fasthostsco.uk 

Advanced Reseller 

0844 563 0777 

H9&9S 

Unlimited 

Unlimited 

Unlimited 

y 

Option 

Option 

y 

y 

y 

y 

X 

Heart lntefnetlWrtwlMartMetriet.co.uk) 

Starter Professional 

Home Professional 

DB45 6447750 

0945 6447750 

I29.B0 

139.99 

2.5GB 

10GB 

10GB 

50GB 

1,000 

10,000 

/ 

y 


y 

y 


y 

/ 

y 

y 

y 

y 


Business Profeiiinnnl 

0945 644 7750 

£129.99 

Unlinked 

Unlimited 

Unfimlted 

y 

y 


/ 


y 

y 

y 

Heart Internet Cwww hearllmiematJD.uk) 

Reseller Professional 

0&45 6447750 

£299.99 

Unlvnited 

Unlimited 

Unfemited 

y 

V 


y 


/ 

y 

y 


Silver 

0309 ISO 103O 

£79.50 

150 WG 

3GB 

5 


Option 

/ 

y 


y 

y 


Hoatwsy (www.hnstwav.ro ukl 

Gold 

03031301030 

E1J9.50 

300MG 

5GB 

to 

y 

Option 

/ 

y 

y 

y 

y 


Hostwaiy (wffw.hQ5twfly.amkJ 

Gold Hue 

030313O1B3O 

£159.50 

450MB 

10GB 

30 

y 

Option 

y 

/ 

y 

y 

y 


Hostwary (www.hostway.couk) 

Platinum 

03O313O 1390 

£359.50 

600MB 

2DGB 

50 

y 

Option 

y 

y 

y 

y 

/ 


HOStway fwwwhngtwayrf.uk) 

Platinum Plus 

Email Phis 

03031301030 

09091901090 

£59950 

£4935 

1.2GB 

50MB 

40GB 

Ni'A 

10 

5 

j 

N/A 

Option 

Ni'A 

y 

N fk 

y 

y 

j 

y 

y 

y 

y 


KUK www.icukhoitlnq.DQ.uk 

Profeninnnl 

0945 0099175 

130 

2SOMB 

1GB 

SO 

y 

y 

option 

y 

y 

y 

y 


K1UK www.irukhrHtlnq rank 

Advanced 

0S45M99i?S 

£50 

2GB 

2MB 

150 

/ 

/ 

option 

y 

y 

/ 

y 



Enterprise 

034-5 009 9i?5 

£00 

2GB 

SQCMB 

Unlimited 

/ 

/ 

option 

y 

y 

/ 

/ 


kuk wwWitaiKrmUnaioftiik 

Professional Plus 

0345 0099175 

£50 

500MB 

5GB 

IDO 

y 

/ 

option 

y 

y 

y 

y 


ITIIH wwwlrt,lihfMtlhf) rank 

Premium Plus 

Q345 0099I75 

£.150 

1GB 

12.5GB 

500 

J 

J 

option 

y 

y 

y 

y 



Enterprise Plus 

0345 0099I75 

IJOO 

2GB 

20GB 

Unlimited 

f 

y 

option 

y 

y 

y 

y 
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In association with 







Our web-hosting guide is brought to you in association with 
Faslhosts, the UK's leading reseller web-hosting provider 
•Unlimited websites * Use your own brand throughout 

* Unlimited bandwidth * 24/7 expert UK-based support 
•Unlimited web space * No risk trial -3 months free 


Hosting listings 



Keep an eye on the latest packages 
and deals with our comprehensive list of service providers 

Discover what an enhanced 
listing can do for your 
business. Contact Richard on: 

O +44(0)1202586436 


Continued. 


NAME ANDURL 


K UK www.lcuktiQsUn^catifc 
JAB Wed-Hosting fo 
jab wed Hosting twwwjaEwebliMBiiaaffl) 
JAB wed Hosting (www.labwebhisstlritj.Girri) 
JAB WeLv HnsLing 

LCN f www.ien.comj 
LCN (www.lcn.com) 

LCN t WwwIrnffimij 

LCN (www.lcn.com) 

LCN fl wwwJcncom) 

LCN f www.lcn.cnm3 
lD HnsLs frinpiffldhfHH.co.uk? 

LD Hosts i http; iffldhost5.cd.uk> 

LD Hosts anipj(lrihflgts.m.uk) 

LD Hosts Ctltittfll 

LD Hosts (htit>Jfldhosts.ca.uk) 


Re-seller Windows 
Reseller Unus 
Reseller Enterprise 
Wall - M105 
Heme-H25 
Prolesslonal- PBS 
Reseller - R25 
Reseller - R105 
Blog 
Starter 
Starter 
Dynamic 
Premium 

Unimileri 
LD BudgeL(Linu:i) 

10 Home (Liniffi) 

10 Pro t Linux) 

10 Unlimited (Llnuxi 
Windows Home 
Windows Unlimited 
Shared-Server Pm 
Shared- Server Advanced 


0*450093175 
0*450099175 
0*450099175 
0*00 0430153 
0*00 0430153 
0*00 0430153 
0*00 0430153 
0*00 0430153 
0143S 342 490 
01438 342 190 
0143B 342 190 
01430 342 190 
G143B 342 190 
01430 342 190 
07*91 235050 
07B91235056 
07691235056 
07*91235856 
07*91235B5B 
07B91 235B5B 
+1310 0415500 
*1310 0415500 



R«fcifis UK fw wwjid hr :*ufc .cornl 

Skvmariret (i wwrt.sli*rrar*«A couk) 
ShymarNet tomAtrmilwILDftiiAi 


RwitHE Dr^ign Business 
ftKMex Design Premium 
Standard 1 
Standard^ 


0*43 2*94525 
0*43 2*94025 
0*00 SI 778* 
0*00 321 77SS 


£59.9* 

£107.*B 

£49 


10GB 

100GB 

10MB 

20MB 


Unlimited 

Unlimited 

2GB 

2GB 


YNameHOG 

” ATTSTdiW* lltiBflHl 80 UiiOfW 

NameHOG www.namehoq.net 

EMAIL ONLY 

STARTER 

HOME PRO 

BUSINESS 

01604212 904 

01604212 904 

01604212 904 

01604212 904 

£11.99 

06.99 

£5999 

£10999 

2.5GB 

10GB 

25GB 

Unlimited 

15GB 

150GB 

Unlimited 

Unlimited 

10 

Unlimited 

Unlimited 

Unlimited 

/ 

/ 

X 

J 

X 

X 

y 

y 

y 

y 

y 

y 

/ 

/ 

y 

y 

y 

y 

y 

y 

/ 

y 

y 

y 

/ 

y 

y 

y 

y 

y 

y 

y 

Nantescd (www.JMmM.oaju hi 

Startup Plus 

08453633632 

Esao9 

500MB 

5GB 

10 

J 

y 

y 

y 

y 

y 

y 

y 

Nameim forww.namcg.CQJult] 

Business 

0*453633632 

£149.99 

2 .DOOMS. 

20GB 

100 



y 

y 

y 

y 

y 

y 

Namesco fmvw names co uk) 

Business Plus 

0*453633632 

£*9.M 

3.0OOM& 

3DGB 

20O 

/ 

/ 

y 

/ 

y 

y 

/ 

y 

Namnccn hrww narnM.c-n uk) 

Designer 

0*453633632 

£239 BB 

1GB 

20GB 

20O 

/ 

y 

y 

y 

y 

y 

y 

y 

Namesoo twwwjiameimjiili] 

Designer Plus 

0*453633632 

£479J*B 

Unflmlted 

30GB 

UnllmfLed 

J 

y 

y 

j 

y 

/ 

V 

/ 

fVi 

DEVELOPER 

0800 061 2601 

£32.89 

1GB 

Unlimited 

500 

/ 

/ 

y 

/ 

y 

/ 

/ 

/ 

1 J NGTCETiRH 

ONE 

0800 0612801 

£109.99 

5GB 

Unlimited 

1000 

J 

y 

/ 

y 

y 

y 

y 

y 


RESELLER 

0800 0612801 

£274.89 

Unlimited 

Unlimited 

1000 

/ 

y 

y 

/ 

y 

y 

y 

y 

Netcetera www.netcetera.co.uk 

VM5O0 Server 

0800 0612801 

£300 

20GB 

Unlimited 

Unlimited 

J 

y 

y 

y 

y 

y 

y 

y 


2200DC Server 

0800 0612801 

£720 

160GB 

Unlimited 

Unlimited 

/ 

/ 

y 

/ 

y 

/ 

/ 

y 


3000DC Server 

0800 0612801 

£1,200 

2x500GB 

Unlimited 

Unlimited 

/ 

y 

y 

/ 

y 

/ 

/ 

y 


2600QC Server 

0800 0612801 

£1,800 

2x500GB 

Unlimited 

Unlimited 

J 

y 

y 

y 

y 

y 

y 

y 


Shared 100 

0207 KKKJ 124 

£60 

too MB 

1G& 

5 

/ 

y 

y 

y 

/ 

y 

y 

y 

Netplan fWLMW.ne1nlan.ea.uk) 

VEIOO 

0207 KH30 424 

£600 

5GB 

5GB 

5 

/ 

y 

y 

y 

y 

y 

y 

y 

Netplan luwUMJMR) 

V5200 

0207 BOO 424 

□ .000 

10GS 

10GB 

10 

/ 

y 

y 

y 

y 

/ 

y 

y 

N#*Lpl.in {whw.nHrinn.ca.uk) 

V93QD 

02D7 BOO 424 

£2.000 

15GB 

50GB 

20 

y 

y 

y 

y 

y 

y 

y 

y 

Netpliin f«TMw,nelpl|in.c£Kuk) 

Dedicated Servers 

0207 BOO 424 

£3,000+ 

73GB+- 

1,500GB 

100+ 

y 

y 

y 

y 

y 

y 

y 

y 

PlirplePaw (w»mw ni Jmlfldavr.mukl 

Emal 

m/a 

£25 

lOOMB 

1GB 

10 



y 

/ 


y 

y 



Play 

WA 

£40 

100 MB 

1GB 

10 



/ 

/ 


y 

y 


PnrplePaw ((Vrtw.Durolanart-.co.ult) 

Plus 

NfA 

E65 

750MB 

5GB 

25 

y 

/ 

y 

j 


/ 

/ 


PurplePaw (wi^fiiirpletwrrftiiya 

Fewer 

N/A 

£95 

2GB 

10GB 

100 

y 

y 

y 

y 


y 

y 


PurplePaw (www.purmenart.co.uk) 

ft 3 Reseller 

N/A 

E660 

10GB 

50GB 

UnllmiLed 

j 

y 

y 

y 


y 

y 


Reddei UK <*UUU*yiailL£jllti 

Reddex Desi^i SLrwLer 

0*43 2*94625 

£1* 

1GB 

Unlimiled 

10 

j 


y 

y 

y 

y 

y 

y 
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Get your listing highlighted! Contact Richard 

O richardJiist@imagme-publi5hing,co.uk 
0 +44(0)1202586436 hosting listings 


... 

I 


Can you 
recommend 
your host? 


Tweet us today with your 
hosting comments and advice 

@WebDesignerMag 


NAME AND URL 


STRATO Hosting Cww.strato-hssljngco uN> 
STRATO Hosting O ww w.fflratP 1 upSETM .GP.Ll h ) 

STRATO Hosting (www.ilr.iln-lis&hnqcn uk> 
5TRATQ Hosting t www.a1rato-hastirMuo.uk> 



Swislt Hosting fluwwjwlshhnstliML could 
Swish Hosting f www.swl5hhostlng.co.uk ) 
Swish Hosting f www.swlEhhMtlnaca.ufc) 
Swish Hosting ( www.swlshhostlmn.coiuh; ) 

Switch Media 
Switch Madia (-. 

Switch Media Cv 





Premium 1 
Premium^ 

STRATO OasIcWeb 
STRATO Powertfeb 
STRATO ArfvnnccdWH* 
STRATO Enterprise Web 
IrlaUl nvy»1hJ 
Starter 
Parsonal 
Plus 

Muhisll+t 

Email 

Windows H usiiiig 
LlnuKHosUng 
aCommerce 
SlteBullder 

Swilch StnfKlnrd 

Switch Buiiiltii 

Business Pro 

Parking 

Forwarding 

Hosting 

Entry 


03001217703 

03001217703 
0080080070070 
0000080070070 
00000S0O70070 
00000SO€70070 
0344 9411000 
0344 9411000 
08449411000 
03449411000 
09449411000 
00445676971 
03445676971 
03445676971 
08445 67 69 71 
08445*769 71 
0151216 9111 
0151216 9111 
0151236 9111 
0370 765 6164 
0870 765 6364 
0970 7656164 
0944 9849100 


Tidy Web Hosting (www.tldywebhMtinq.CQUk) 

Home 

0344 3S49IOO 

£50 

500MB 

5GB 

Unlimited 

J 

J 

J’ 

J 

x 

x 

X 


lldy Web Hosting (www.tldyrtebtiostlng.GG.uk) 

HomePro 

0344 384 9100 

£100 

1GB 

10GB 

Unlimited 

/ 

s 

J 

/ 

x 

s 

x 


IldyWeb Hosting 

Business 

0344 3849100 

EI50 

200 

20GB 

Unlimited 

s 

s 

J 

/ 

x 

x 

x 


lldy Web Hosting (www.tldvwebhostmn reuk) 

EkjsmeaaPro 

08448849100 

£250 

5GB 

50GB 

Unlimited 

/ 

/ 

X 

/ 

x 

X 

X 


TwentyHosl (www twentvhrjgt.ncNuk) 

OasIcSS 

0845 641 0776 

£24 

100MB 

1.500MB 

25 

/ 

/ 

J 

X 

x 

X 

/ 

/ 

TwenlyHoal £wmlwmlyhnstXfliiikJ 

Standards 

0945 641 0776 

£45 

200MB 

1,000MB 

50 

J 

7 

J 

y 

j 

x 

/ 

J 

Twenty Host (w ww.twenlvhMt.c&iifc) 

BusivessSS 

0345 641 0776 

LTD 

500MB 

7,500MB 

IDO 

s 

J 

J 

j 

x 

x 

X 

s 

Twenty Host twww4wentvhjMt.CQ.uk) 

Advene e-dSS 

0345 641 0776 

£110 

1,000MB 

15,000MB 

200 

J- 

J 

J 

/ 

x 

x 

X 

s 

VARIHQST twwwvaimrilnetl 

Word Press Basic 

0203144 7057 

£4788 

2GB 

IDGB 

K> 

s 



/ 

x 

x 

X 

/ 

VARiHOST (www va r*osl. net) 

WordPress Plus 

02081447057 

£71.06 

4GB 

100GB 

100 

s 

/ 


x 

/ 

X 

/ 

/ 

VARiHOST Cwww,var*K»t net) 

WordPress Extra 

02081447057 

£1*9.06 

ifnllmrled 

Unlimited 

Unlimited 

/ 

/ 


x 

/ 

/ 

/ 

/ 

WribFusInn (www.webfuslnn.DO.uk) 

Fusion Prnlessinnnl 

0945130 1602 

£107.40 

BOB 

5QGB 

1,000 

/ 


/ 

/ 

x 

/ 

/ 


WefcFuslon (www.webruslan.co.uk) 

Fusion Business 

0345130 1602 

EI7940 

IDGB 

150GB 

1500 

/ 


J 

j 

/ 

/ 

J 


WeftFuslon (www.yiebfu5ldn.LO.uk) 

Fusion Developer 

0345130 1602 

£227.40 

20GB 

3O0GB 

5.000 

/ 


/ 

/ 

x 

/ 

s 


WetuFuslon (www.webfuslon.c&uk) 

Fusion Reseller 

0345130 1602 

£329.99 

Unlimited 

Unlimited 

Unlimited 

s 


J 

x 

x 

/ 

s 


Weft Wlz (www webwIir.cauN) 

Windows Starter 

0844 3561450 

£69,05 

Ki& 

25GB 

100 

/ 

/ 

X 

X 

x 

X 

/ 

/ 


Windows Professional 

0844 3501450 

£149.95 

4&B 

100GB 

500 

/ 

/ 

J 

X 

/ 

/ 

/ 

/ 

WhjWIj (www.vwjbwU.ca.uk) 

Windows SLarLer Resrtlw 

09441501450 

£19995 

5GB 

25GB 

500 

I 

J 

J 

x 

j 

X 

J 

s 



Zen Internet www.zen.co.uk 


Bronze (Linux) 

0345 050 9000 

£4738 

2GB 

20GB 

10 

✓ 

/ 

/ 

/ 

/ 


/ 

X 

Sliver (Linux) 

0345 050 9000 

£95.38 

5GB 

50GB 

25 



/ 

/ 

/ 

/ 

X 

7 

Gold (Linux) 

0045 058 9000 

£143.88 

10GB 

100GB 

50 



/ 

J 

/ 

/ 

J 

X 

Platinum (Linux) 

0845 058 9000 

£23988 

50GB 

250G8 

100 

y 

s 

/ 

X 

/ 

/ 

s 

X 

Reseller (Linux) 

0845 058 9000 

£47988 

150GB 

500GB 

250 


/ 

/ 

J 

/ 

/ 

J 

X 

Designer (Windows) 

0345 053 9000 

£59.33 

2GB 

20GB 



X 

X 

J 

/ 

/ 

/ 

X 

Developer (Windows) 

0345 053 9000 

£17983 

10GB 

100GB 



X 

X 

J 

/ 

/ 

J 

X 


Golden rules to top hosting We identify and explain the key criteria for success. 


Thebest 

resources for you 

Selecting your ideal packagers largely 
determined by the kinds of newxces and quantity 
off features you require frcm your hosting solution. 
Key criteria like web space and monthly bandwidth 
are important tar those services likely to be 
subjected to heavy amounts of traffic, which is 
why package solutions far enterprise applications 
are typically much more expensive. The general 
rule of thumb is not to buy more than you need or 
underestimate potential requirements.. 


Competitive 
and reliable 

The hosting martlet is big business and 
hosting providers do try to drive prices down 
in a bid to entice your custom. Use our chart to 
compnare costs, but be sure to visit the vendor 
websites to keep trad; off the latest deals, as 
they change. Remember that low price Should 
not always be a deciding facto and that paying 
a premium lor a more ratable, trusted and 
experienced vendor can otter you much better 
value to money In the long term. 


Putting you 
in control 

Modern hosting is all about giving 
customers the power to set up. monitor and 
maintain their web space with minimal fuss. Most 
commercial vendors offer access to award- winning 
and intuitive control panels that enable you to log 
in remotely and intuitively tweak your account, 
without the need to relay complicated instructions 
down the phone. Be sure to find out from your 
potential ncstas much as. you can about the 
control panel and requests demo. 


Fantastic 
customer support 

If all else fails and you need some 
extra help to get your hosting back online, then 
3 commitment to future customer support is key. 
Many vendors orto a service-level agreement 
which outlines what you can expect here, however 
most will be more explicit about whether phone 
support is included or email contact Is preferred. 
Think about what you need for pe&ce or mind and 
factor good, comprehensive technical support 
against me price. 
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■ SJJ80 NEXT ISSUE 

designer 



HTML 



Futureproof 


HTML5 


THE LATEST HTML5 TECHNIQUES 
FOR NEXT-GEN WEBSITES 





b 





^ jQuerv 

& mOm tett* do mons. 


GITANDGITHUB PRO FILE: LBI 
PRIMER DENMARK 


An introduction to the developer's 
favourite version control system and 
project repository 


The creative geniuses behind the 
awesome Maersk, IKEA and Nike 
Football websites 


GO MOBILE 
WITHJQUERY 


Utilise jQuery and Modify to 
quickly build a mobile version of 
your website 


FLASH TO 
HTML5 

Convert Flash 
animations to 
standardS'friendly 
HTML5 with new 
Flash CS6toois 



Visit the WEB DESIGNER online shop at 

imagineshop.co.uk 


for back issues, books and merchandise 


ALL IN YOUR LATEST 

Issue 199 on sale 

Thursday 26 July 2012 
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Read anything 
good lately? 

Shop for quality magazines, 
books and DVDs from 
Imagine Publishing 


imagneshop.co.uk.il 


THE UK'S No. 1 WEB HOST 



1&1 has been m the UK for more 
than 10 years and has over 1 million 
UK customer contracts. With more 
than 6.5 million contracts worldwide, 
1&1 is a global leaden 

TOW 

AWARDS 2011 


1&1 BUSINESS 

■ UNLIMITED Wobspace 

■ UNLIMITED Traffic 

■ NEW: Unlimited access to 

65 (tee 1&1 Click & Build 
Applications 

■ NEW: 1 Dedicated SSL 

Certificate included 

■ NEW: Up to £75 in Bing 1 " 
and ratebook 1 * Credits 

FREE 

FOR 6 MONTHS 

then £9.99/month* 

I 1&1 UNLIMITED 

■ UNLIMITED Webspace 

■ UMLIMITED Traffic 

■ 1 Free .co.uk domain 
included 

■ ST0 100 MySQL 5 Databases 

■ NEW: Up to £55 in Bing‘ N 
and Facebook* Credits 

FREE 

FOR 6 MONTHS 

then £6. 99/month 4 i 

info 1&1 DOMAINS 

■ II 1 1 V starting at 

now only £0.99 first year* — 

.co.uk £ 0'-- 

now only £2.49 first year* 


* Visit www.1artdixo.u k for foil promotional 
offer details, terms and conditions. 

Prjces exclude VAT. 


1&1 


Call 

0844 3351211 


www.land1.co.uk 


MAGAZINES 


BOOKS 


DVDS 


DOWNLOADS 


GIFTS 
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r At last... ^ 

Web Hosting plans that 
make it easy for designers 
to run their business. ^ 


From just... per year 


www. i 1.1 .co.uk 

Tidy Web Hosting is a trading name of Pddings Limited 

Registered in England & Wales (5935455). All prices subject to VAT. Call: 0844 BS4 9100 


TSBrwebhosting... 

designers prefer it 


Relax 

We take care of the server, leaving you 
free to focus on building websites. 


, re m '-ontrol 

We II provide all the tools you need to 
setup and manage your websites. 



We're Here to Help 

Our team will provide supportto you an 
vour colleagues when you need it mos . 


an 


coup?® cS? a £ and 


sting 


CO 


ufc 


PostcodeAnywhere 

The easiest way to add features to your website. 

UK & international addressing | Address cleansing 
Payment validation | Customer profiling 
Store finder 


To find out more: 

Call: 0800 047 0495 
www.postcodeanywhere.com 





trade secret 

noun {c} -tred si kriht - A secret formula, method, or device that gives one an advantage over competitors. 

Low cost address lookup for your website 


Buy online from £15 * 

■> Eliminate spelling m istakes 
Reduced abandoned carts 


80% reductio n of keyst rokes entering add resses 
Create a profession a li m age fo r your clients 
Simple integration with SDK & working exa mpl es 



For more details visit postcode-softwa re ■ net or call 0845 83 82 666 
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UK web solutions ui 


Established 2001 


Premium Web Hosting 

Our hosting plans come ujith the following features os standard: 

* cPanel control panel 

* FREE Web applications 

® SPRM/Virus protection for email 

* Daily backups - multiple restore points 

Utilising GoudLinux for rock solid stobility ond high performance, 
your ujebsite Is in safe hands with us. 

from £3.99 per month 


Web Hosting Reseller plans VPS Managed Servers 


clikpic 

Websites made easy 


Professionally designed websites 
for only £40 p.a. 

Clikpic is an easy-to-use service 
for people who want a website 
without the cost and hassle of 
setting one up. 

With minimal technical expertise 
required, you can use our online 
admin system and a wide 
choice of template designs to 
create and edit your own web 
site quickly easily and very 
cost-effectively. 

• Update or change your site whenever 
you want and as often as you like. 

• Have as many pages as you like. 

• Dozens of style features and options 
to customise your site and give it 
your own fool and look. 

• Take orders online. 

• Opt to haye your own domain name. 

Many additional features recently 
added with many more to come 



www.clikpic.com 14 day 


WifH 


Everything you need to work better 
online from Fasthosts 

That's not just a web-hosting package, a domain name, a virtual or 
dedicated server, broadband, hosted email or online backup. It's also 
24/7 support over the phone and online. 

Your work doesn't stop at 5:3 Qpm, so neither do we. That's why you'll get 
support on our technology from friendly experts24/7, Sut the best thing 
about our 24/7 support is that you probably won’t need to use it. 

Plus, with Up to 70°/o off* selected products and NEW dedicated 
servers there's no better time to buy. 

Find out how your business can work better online 

call free on 08006520 444 or visit www.fasthosts.CO.uk 



fasthosts 


hosting | domains | NEW dedicated servers j virtual private servers | reseller hosting 

























greattfgitalmags * The official download website of Imagine Publish 


HOME SUBSCRIPTIONS CONTACT US 


Magazines 


•J /iPad /iPhone /Android phone /Android tablet /Apple Mac / Windows PC 


eBooks Apps 


360 Magazine 


3D Artist 


•i m 





















italMags.com 


To buy more Imagine digital editions and for the 
latest issues and best offers, please go to 


www.GreatDi 


No Disc. No Problem 

Many of the files you’re looking for can be 
found on the magazine’s website 

Imagine digital editions to geuhe most out of your digital 

0 0 editions, be sure to enjoy all of our 

are a new and exciting fantastic features, including: 

way to experience our ' Zoomable text and P ictures 
world-leading magazines ! SSS2 

and bookazines. • Take your collection with you 

_ ■ ■■ L IriB n !l _ 






















I Amazon 


Tate 

The Amazon homepage 
uses tabs to separate 
content, but back in 2001 
the popular method was 
to create a page with the 
same header/layout and 
new content and link to 
the page., offering the 
Illusion of tabbed panels 
popular today. 



liim 



Web 

design 


' lohn Adqiinf 
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■ ■IQliidfnil adi,nmlindb^ckarn iMtnidn]1U]9il4nrt>kl^)wfr,gntr 
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Font favourites 

System fonts were all the 
rage back in 2001.with 
Verdana. Arial and Times 
New Roman being the 
popular choice, as 
demonstrated on the 
Amazon site. 



Amazon 


www.amazon.com 


The online retailer started as a bookstore in 1995. but has gone 
on to become one of the biggest names n eCommerce 


Amazon is synonymous with eCommerce, and 
has been at the forefront of the online shopping 
experience for well over 15 years. The store 
slowly amassed more and more interest and it 
goes without saying that the design of the site was 
a key factor in its success. The site boasted a 
simple, intuitive Interface, which ensured that the 


end user got to their destination with as little 
hassle os possible. The design was typical of the 
time, but as the service has expanded and grown 
its design has evolved at a much slower rate. The 
current incarnation of the Amazon site still owes a 
great deal of debt to the original, with most of the 
upgrades coming under the hood. 


i€ A simple, intuitive interface ensured 
the end user got to their destination with 
as little hassle as possible Pi 
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Get more power when you need it! 

With a 123-reg VPS you can scale up and down as needed. 

Q Host multiple domains [10 to unlimited) Q 50GB - 300GB Storage (HDD) 

W 1GB - 12GB Memory (RAM) £* 100Mbit unmetered traffic 

W 1-12 Core Processors (vCPU) ** UK-based support & data centre 


FROM ONLY £14.99 . A MONTH 




Power up your business at www.123-req.co.uk/VPS 






vCPU 



HDD 



RAM 


Fully scalable and customisable 

Your VPS specs can be modified on the 
fly to ensure you can meet any sudden 
changes in demand or popularity. 


VPS without compromises 

Affordable yet high-quality VPS hosting 
without compromise. We use branded 
Intel processors and Dell servers in our 
UK data centre. 


Advanced virtualisation technology 

KVM is the latest generation of virtualisation 
technology, offering high-performance 
access to server resources for both Linux and 
Windows virtual private servers. 



From only £11.99 per month 


✓ 24/7 UK Support 


■/ Free & Instant Setup 


✓ 99.99% Uptime SLA 


■/ Full root access 


Find out more: www.heartinternet.co.uk 
Call us: 0845 644 7750 


# heart internet 

www.heartinternet.co.uk 

Web heating I Reseller hosting I VPS < Servers 











